表格列Column

今天药忘吃喽~ 2022-01-09 23:37 491阅读 0赞

Ext.grid.column.Column类定义了表格内部与列相关的配置，其中包括列标题及数据展示。

Ext.grid.column.Column主要配置项

<table> 
 <tbody> 
  <tr> 
   <th>配置项</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
  <tr> 
   <td>align</td> 
   <td>String</td> 
   <td>设置列标题和数据的对齐方式，默认为left</td> 
  </tr> 
  <tr> 
   <td>columns</td> 
   <td>Array</td> 
   <td>设置组列</td> 
  </tr> 
  <tr> 
   <td>dataIndex</td> 
   <td>String</td> 
   <td>设置列与数据集中数据的对应关系，值为数据模型中的字段名称</td> 
  </tr> 
  <tr> 
   <td>draggable</td> 
   <td>Boolean</td> 
   <td>列头是否可以拖动，默认为true</td> 
  </tr> 
  <tr> 
   <td>flex</td> 
   <td>Number</td> 
   <td>列宽所占flex和的比例</td> 
  </tr> 
  <tr> 
   <td>groupable</td> 
   <td>Boolean</td> 
   <td>在使用Ext.grid.feature.Grouping分组特性的情况下是否禁用该列在标题菜单中的分组功能</td> 
  </tr> 
  <tr> 
   <td>header</td> 
   <td>String</td> 
   <td>列标题</td> 
  </tr> 
  <tr> 
   <td>hideable</td> 
   <td>Boolean</td> 
   <td>false则阻止用户隐藏该列，默认为true</td> 
  </tr> 
  <tr> 
   <td>menuDisabled</td> 
   <td>Boolean</td> 
   <td>true则禁用标题菜单，默认为false</td> 
  </tr> 
  <tr> 
   <td>render</td> 
   <td>Function</td> 
   <td>自定义渲染函数</td> 
  </tr> 
  <tr> 
   <td>sortable</td> 
   <td>Boolean</td> 
   <td>是否允许进行排序，默认为true,将根据Ext.data.Store.remoteSort判断进行本地排序还是远程排序。</td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>String</td> 
   <td>列标题，header配置项优先</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>Number</td> 
   <td>列宽</td> 
  </tr> 
 </tbody> 
</table>

Ext.grid.column.Column子类：

*  Ext.grid.column.Boolean 布尔列
 *  Ext.grid.column.Number 数字列
 *  Ext.grid.column.Date 日期列
 *  Ext.grid.column.Action 动作列
 *  Ext.grid.column.Template 模板列
 *  Ext.grid.RowNumber 行号列
 *  Ext.tree.Column 树结构列

1、布尔列Ext.grid.column.Boolean配置项

<table> 
 <tbody> 
  <tr> 
   <th>配置项</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
  <tr> 
   <td>falseText</td> 
   <td>String</td> 
   <td>渲染false值对应的文本，默认为false</td> 
  </tr> 
  <tr> 
   <td>trueText</td> 
   <td>String</td> 
   <td>渲染true值对应的文本，默认为true</td> 
  </tr> 
  <tr> 
   <td>undefinedText</td> 
   <td>String</td> 
   <td>渲染空值对应的文本，默认为空字符串</td> 
  </tr> 
 </tbody> 
</table>

2、数字列Ext.grid.column.Number配置项

<table> 
 <tbody> 
  <tr> 
   <th>配置项</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
  <tr> 
   <td>format</td> 
   <td>String</td> 
   <td>设置Ext.util.Format.number函数的格式化字符串，默认为0,000.00</td> 
  </tr> 
 </tbody> 
</table>

3、日期列Ext.grid.column.Date

3.1、Ext.grid.column.Date主要配置项

<table> 
 <tbody> 
  <tr> 
   <th>配置项</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
  <tr> 
   <td>format</td> 
   <td>String</td> 
   <td>设置Date.format函数的格式化字符串，默认为Ext.Date.defaultFormat</td> 
  </tr> 
 </tbody> 
</table>

3.2、Ext.grid.column.Date示例

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.grid.column.Column示例</title>
        <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
        <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
        <script type="text/javascript">
            Ext.onReady(function () {
                Ext.define("Employee", {
                    extend: "Ext.data.Model",
                    fields: [
                        { name: "Name" },
                        { name: "Sex" },
                        { name: "InOffice" },
                        { name: "Birthday" },
                        { name: "Age" },
                        { name: "Salary" }
                    ]
                });
                var employee = [
                    { "Name": "王晓敏", "Sex": "male", "InOffice": true, "Birthday": new Date(1980, 3, 29), "Age": 32, "Salary": 15600000 },
                    { "Name": "夏慧", "Sex": "female", "InOffice": true, "Birthday": new Date(1987, 7, 6), "Age": 25, "Salary": 2300 },
                    { "Name": "陈佳佳", "Sex": "female", "InOffice": false, "Birthday": new Date(1983, 10, 13), "Age": 29, "Salary": 5000 },
                ];
                var store = Ext.create("Ext.data.Store", {
                    model: "Employee",
                    data: employee,
                    autoLoad: true
                });
    
                Ext.create("Ext.grid.Panel", {
                    title: "Ext.grid.column.Column示例",
                    frame: true,
                    width: 500,
                    height: 300,
                    renderTo: Ext.getBody(),
                    store: store,
                    columns: [
                        { header: "姓名", width: 100, dataIndex: "Name" },
                        { header: "性别", width: 60, dataIndex: "Sex" },
                        { header: "在职状态", width: 60, dataIndex: "InOffice", xtype: "booleancolumn", trueText: "在职", falseText: "离职" },
                        { header: "生日", width: 100, dataIndex: "Birthday", xtype: "datecolumn", format: "Y年m月d日" },
                        { header: "年龄", width: 60, dataIndex: "Age" },
                        { header: "薪资", width: 80, dataIndex: "Salary", xtype: "numbercolumn", format: "0,000" }
                    ]
                });
            });
        </script>
    </head>
    <body>
    </body>
    </html>

效果图：

![2012042920211777.jpg][]

4、动作列Ext.grid.column.Action

4.1、Ext.grid.column.Action主要配置项

<table> 
 <tbody> 
  <tr> 
   <th>配置项</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
  <tr> 
   <td>altText</td> 
   <td>String</td> 
   <td>应用于图片元素上的alt属性，默认为空字符串</td> 
  </tr> 
  <tr> 
   <td>getClass</td> 
   <td>Function</td> 
   <td>返回图片样式函数</td> 
  </tr> 
  <tr> 
   <td>handler</td> 
   <td>Function</td> 
   <td> <p>设置图标点击事件的响应函数，该函数将被传入如下参数：</p> <p>view：TableView，表格视图</p> <p>rowIndex：Number，当前行的索引</p> <p>colIndex：Number，当前列的索引</p> <p>item：Object，条目</p> <p>e：Event，点击事件对象</p> </td> 
  </tr> 
  <tr> 
   <td>icon</td> 
   <td>String</td> 
   <td>获取图标资源的URL地址，默认为Ext.BLANK_IMAGE_URL</td> 
  </tr> 
  <tr> 
   <td>iconCls</td> 
   <td>String</td> 
   <td>图标样式</td> 
  </tr> 
  <tr> 
   <td>items</td> 
   <td>Array</td> 
   <td>包含多个图标定义的数组</td> 
  </tr> 
  <tr> 
   <td>scope</td> 
   <td>Object</td> 
   <td>设置handler和getClass函数的作用域，默认为Column</td> 
  </tr> 
  <tr> 
   <td>stopSelection</td> 
   <td>Boolean</td> 
   <td>默认为true阻止当动作发生时，当前行被选中</td> 
  </tr> 
  <tr> 
   <td>tooltip</td> 
   <td>String</td> 
   <td>设置工具提示消息。需要初始化Ext.tip.QuickTipManager</td> 
  </tr> 
 </tbody> 
</table>

4.2、Ext.grid.column.Action示例

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.grid.column.Column示例</title>
        <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
        <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
        <script type="text/javascript">
            Ext.onReady(function () {
                Ext.define("Employee", {
                    extend: "Ext.data.Model",
                    fields: [
                        { name: "Name" },
                        { name: "Sex" },
                        { name: "InOffice" },
                        { name: "Birthday" },
                        { name: "Age" },
                        { name: "Salary" }
                    ]
                });
                var employee = [
                    { "Name": "王晓敏", "Sex": "male", "InOffice": true, "Birthday": new Date(1980, 3, 29), "Age": 32, "Salary": 15600000 },
                    { "Name": "夏慧", "Sex": "female", "InOffice": true, "Birthday": new Date(1987, 7, 6), "Age": 25, "Salary": 2300 },
                    { "Name": "陈佳佳", "Sex": "female", "InOffice": false, "Birthday": new Date(1983, 10, 13), "Age": 29, "Salary": 5000 },
                ];
                var store = Ext.create("Ext.data.Store", {
                    model: "Employee",
                    data: employee,
                    autoLoad: true
                });
    
                Ext.create("Ext.grid.Panel", {
                    title: "Ext.grid.column.Column示例",
                    frame: true,
                    width: 550,
                    height: 300,
                    renderTo: Ext.getBody(),
                    store: store,
                    columns: [
                        { header: "姓名", width: 100, dataIndex: "Name" },
                        { header: "性别", width: 60, dataIndex: "Sex" },
                        { header: "在职状态", width: 60, dataIndex: "InOffice", xtype: "booleancolumn", trueText: "在职", falseText: "离职" },
                        { header: "生日", width: 100, dataIndex: "Birthday", xtype: "datecolumn", format: "Y年m月d日" },
                        { header: "年龄", width: 60, dataIndex: "Age" },
                        { header: "薪资", width: 80, dataIndex: "Salary", xtype: "numbercolumn", format: "0,000" },
                        {
                            header: "操作",
                            width:50,
                            xtype: "actioncolumn",
                            items: [{
                                icon: "images/edit.png",
                                handler: function (grid, rowIndex, colIndex) {
                                    var rec = grid.getStore().getAt(rowIndex);
                                    Ext.MessageBox.alert("编辑" + rec.get("Name"));
                                }
                            }, {
                                icon: "images/delete.png",
                                handler: function (grid, rowIndex, colIndex) {
                                    var rec = grid.getStore().getAt(rowIndex);
                                    Ext.MessageBox.alert("删除" + rec.get("Name"));
                                }
                            }]
                        }
                    ]
                });
            });
        </script>
    </head>
    <body>
    </body>
    </html>

效果图：

![2012042922370867.jpg][]

5、模板列Ext.grid.column.Template

<table> 
 <tbody> 
  <tr> 
   <th>配置项</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
  <tr> 
   <td>tpl</td> 
   <td>String/XTemplate</td> 
   <td>设置一个XTemplate模板对象或模板定义，模板数据将被传入其中</td> 
  </tr> 
 </tbody> 
</table>

示例：

{
        header:"描述"，
        width:100,
        xtype:"templatecolumn",
        tpl:"{Name}<tpl if="leader==false">不</tpl>是组长"
    }

6、行号列Ext.grid.RowNumberer

6.1、Ext.grid.RowNumberer主要配置项

<table> 
 <tbody> 
  <tr> 
   <th>配置项</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>String</td> 
   <td>显示在列表标题中的文本或HTML代码段</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>Number</td> 
   <td>行号列的宽度，默认为23px</td> 
  </tr> 
 </tbody> 
</table>

6.2、Ext.grid.RowNumberer示例

Ext.create("Ext.grid.RowNumberer", { text: "序号", width: 30 })

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.grid.column.Column示例</title>
        <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
        <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
        <script type="text/javascript">
            Ext.onReady(function () {
                Ext.define("Employee", {
                    extend: "Ext.data.Model",
                    fields: [
                        { name: "Name" },
                        { name: "Sex" },
                        { name: "InOffice" },
                        { name: "Birthday" },
                        { name: "Age" },
                        { name: "Salary" }
                    ]
                });
                var employee = [
                    { "Name": "王晓敏", "Sex": "male", "InOffice": true, "Birthday": new Date(1980, 3, 29), "Age": 32, "Salary": 15600000 },
                    { "Name": "夏慧", "Sex": "female", "InOffice": true, "Birthday": new Date(1987, 7, 6), "Age": 25, "Salary": 2300 },
                    { "Name": "陈佳佳", "Sex": "female", "InOffice": false, "Birthday": new Date(1983, 10, 13), "Age": 29, "Salary": 5000 },
                ];
                var store = Ext.create("Ext.data.Store", {
                    model: "Employee",
                    data: employee,
                    autoLoad: true
                });
    
                Ext.create("Ext.grid.Panel", {
                    title: "Ext.grid.column.Column示例",
                    frame: true,
                    width: 550,
                    height: 300,
                    renderTo: Ext.getBody(),
                    store: store,
                    columns: [
                        Ext.create("Ext.grid.RowNumberer", { text: "序号", width: 30 }),
                        { header: "姓名", width: 100, dataIndex: "Name" },
                        { header: "性别", width: 60, dataIndex: "Sex" },
                        { header: "在职状态", width: 60, dataIndex: "InOffice", xtype: "booleancolumn", trueText: "在职", falseText: "离职" },
                        { header: "生日", width: 100, dataIndex: "Birthday", xtype: "datecolumn", format: "Y年m月d日" },
                        { header: "年龄", width: 60, dataIndex: "Age" },
                        { header: "薪资", width: 80, dataIndex: "Salary", xtype: "numbercolumn", format: "0,000" },
                        {
                            header: "操作",
                            width: 50,
                            xtype: "actioncolumn",
                            items: [{
                                icon: "images/edit.png",
                                handler: function (grid, rowIndex, colIndex) {
                                    var rec = grid.getStore().getAt(rowIndex);
                                    Ext.MessageBox.alert("编辑" + rec.get("Name"));
                                }
                            }, {
                                icon: "images/delete.png",
                                handler: function (grid, rowIndex, colIndex) {
                                    var rec = grid.getStore().getAt(rowIndex);
                                    Ext.MessageBox.alert("删除" + rec.get("Name"));
                                }
                            }]
                        }
                    ]
                });
            });
        </script>
    </head>
    <body>
    </body>
    </html>

效果图：

![2012043000224793.jpg][]

转载于:https://www.cnblogs.com/libingql/archive/2012/04/29/2476067.html

[2012042920211777.jpg]: /images/20220109/f92f301b9d9e448bad0359da68b74e17.png
[2012042922370867.jpg]: /images/20220109/337415d1196b435c9132ed05fb47a8b0.png
[2012043000224793.jpg]: /images/20220109/2a3e0f3f943b46f1ad72408b55ca3854.png