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>
效果图: