表格列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,
                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>

　　效果图：

　　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,
                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>

　　效果图：

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

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

　　示例：

{
    header:"描述"，
    width: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: "序号", 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>

　　效果图：

posted @ 2012-04-29 11:24 libingql 阅读(7805) 评论(0) 编辑收藏举报

刷新页面返回顶部

Libing@2019

表格列Column