表格列Column

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

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

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

　　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配置项

配置项类型说明
falseText String 渲染false值对应的文本，默认为false
trueText String 渲染true值对应的文本，默认为true
undefinedText String 渲染空值对应的文本，默认为空字符串

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

配置项类型说明
format String 设置Ext.util.Format.number函数的格式化字符串，默认为0,000.00

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

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

配置项类型说明
format String 设置Date.format函数的格式化字符串，默认为Ext.Date.defaultFormat

　　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,
                 500,
                height: 300,
                renderTo: Ext.getBody(),
                store: store,
                columns: [
                    { header: "姓名",  100, dataIndex: "Name" },
                    { header: "性别",  60, dataIndex: "Sex" },
                    { header: "在职状态",  60, dataIndex: "InOffice", xtype: "booleancolumn", trueText: "在职", falseText: "离职" },
                    { header: "生日",  100, dataIndex: "Birthday", xtype: "datecolumn", format: "Y年m月d日" },
                    { header: "年龄",  60, dataIndex: "Age" },
                    { header: "薪资",  80, dataIndex: "Salary", xtype: "numbercolumn", format: "0,000" }
                ]
            });
        });
    </script>
</head>
<body>
</body>
</html>

　　效果图：

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

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

配置项类型说明
altText String 应用于图片元素上的alt属性，默认为空字符串
getClass Function 返回图片样式函数
handler Function

设置图标点击事件的响应函数，该函数将被传入如下参数：

view：TableView，表格视图

rowIndex：Number，当前行的索引

colIndex：Number，当前列的索引

item：Object，条目

e：Event，点击事件对象
icon String 获取图标资源的URL地址，默认为Ext.BLANK_IMAGE_URL
iconCls String 图标样式
items Array 包含多个图标定义的数组
scope Object 设置handler和getClass函数的作用域，默认为Column
stopSelection Boolean 默认为true阻止当动作发生时，当前行被选中
tooltip String 设置工具提示消息。需要初始化Ext.tip.QuickTipManager

　　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,
                 550,
                height: 300,
                renderTo: Ext.getBody(),
                store: store,
                columns: [
                    { header: "姓名",  100, dataIndex: "Name" },
                    { header: "性别",  60, dataIndex: "Sex" },
                    { header: "在职状态",  60, dataIndex: "InOffice", xtype: "booleancolumn", trueText: "在职", falseText: "离职" },
                    { header: "生日",  100, dataIndex: "Birthday", xtype: "datecolumn", format: "Y年m月d日" },
                    { header: "年龄",  60, dataIndex: "Age" },
                    { header: "薪资",  80, dataIndex: "Salary", xtype: "numbercolumn", format: "0,000" },
                    {
                        header: "操作",
                        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>

　　效果图：

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

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

　　示例：

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

　　6、行号列Ext.grid.RowNumberer

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

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

　　6.2、Ext.grid.RowNumberer示例

Ext.create("Ext.grid.RowNumberer", { text: "序号",  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,
                 550,
                height: 300,
                renderTo: Ext.getBody(),
                store: store,
                columns: [
                    Ext.create("Ext.grid.RowNumberer", { text: "序号",  30 }),
                    { header: "姓名",  100, dataIndex: "Name" },
                    { header: "性别",  60, dataIndex: "Sex" },
                    { header: "在职状态",  60, dataIndex: "InOffice", xtype: "booleancolumn", trueText: "在职", falseText: "离职" },
                    { header: "生日",  100, dataIndex: "Birthday", xtype: "datecolumn", format: "Y年m月d日" },
                    { header: "年龄",  60, dataIndex: "Age" },
                    { header: "薪资",  80, dataIndex: "Salary", xtype: "numbercolumn", format: "0,000" },
                    {
                        header: "操作",
                         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>

　　效果图：

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/libingql/p/2476067.html