ExtJS4学习笔记十－－Grid使用

一、grid的例： 

Javascript代码  

1. //配置表格列  
2. {header: "姓名", width: 50, dataIndex: 'name'},  
3. {header: "组长", width: 50, dataIndex: 'leader',   
4.     xtype: 'booleancolumn',//Ext.grid.column.Boolean布尔列  
5.     trueText: '是',  
6.     falseText: '否'  
7. },  
8. {header: "生日", width: 100, dataIndex: 'birthday',   
9.     xtype : 'datecolumn',//Ext.grid.column.Date日期列  
10.     format : 'Y年m月d日'//日期格式化字符串  
11. },  
12. {header: "薪资", width: 50, dataIndex: 'salary',   
13.     xtype: 'numbercolumn',//Ext.grid.column.Number数字列  
14.     format:'0,000'//数字格式化字符串  
15. }  

Javascript代码  

1. xtype: 'actioncolumn',//Ext.grid.column.Action动作列  
2. items: [{  
3.     icon: 'images/edit.gif',//指定编辑图标资源的URL   
4.     handler: function(grid, rowIndex, colIndex) {  
5.         //获取被操作的数据记录  
6.         var rec = grid.getStore().getAt(rowIndex);  
7.         alert("编辑 " + rec.get('name'));  
8.     }  
9. },{  
10.     icon: 'images/del.gif',//指定编辑图标资源的URL   
11.     handler: function(grid, rowIndex, colIndex) {  
12.         var rec = grid.getStore().getAt(rowIndex);  
13.         alert("删除 " + rec.get('name'));  
14.     }                  
15. },{  
16.     icon: 'images/save.gif',//指定编辑图标资源的URL   
17.     handler: function(grid, rowIndex, colIndex) {  
18.         var rec = grid.getStore().getAt(rowIndex);  
19.         alert("保存 " + rec.get('name'));  
20.     }                  
21. }]  

Javascript代码  

1. {  
2.     header: "描述", width: 100,  
3.     xtype: 'templatecolumn',//Ext.grid.column.Template数字列  
4.     tpl : '{name}<tpl if="leader == false">不</tpl>是组长'  
5. }  

Javascript代码  

1. Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35})  

二、自定义渲染函数示例： 

Javascript代码  

1. //定义渲染函数，格式化性别显示  
2. function formatSex(value){        
3.     return value=='man'?'男':'<font color=red>女</font>';  
4. }  
5. //定义渲染函数，格式化年龄显示  
6. function formatAge(value,metadata){           
7.     if(value < 30){  //年龄小于30的设置背景颜色为#CCFFFF  
8.         metadata.style = 'background-color:#CCFFFF;';  
9.     }  
10.     return value;  
11. }  

Javascript代码  

1. columns: [//配置表格列  
2.                 {header: "id", width: 30, dataIndex: 'id'},  
3.                 {header: "姓名", width: 50, dataIndex: 'name'},  
4.                 {header: "性别", width: 50, dataIndex: 'sex',renderer:formatSex},  
5.                 {header: "生日", width: 100, dataIndex: 'birthday',   
6.                     //格式化生日显示  
7. renderer:Ext.util.Format.dateRenderer('Y年m月d日')             },  
8.                 {header: "年龄", width: 50, dataIndex: 'age',renderer:formatAge}  
9.             ]  

三、Ext.selection.CellModel（单元格选择模式）示例 

Javascript代码  

1. //创建表格数据  
2. var datas = [  
3.     [100,'张三',24], [200,'李四',30], [300,'王五',29]  
4. ];  
5. //创建Grid表格组件  
6. var grid = Ext.create('Ext.grid.Panel',{  
7.     title : '单元格选择模式示例',  
8.     renderTo: Ext.getBody(),  
9.     width:200,  
10.     height:170,  
11.     frame:true,  
12.     selType: 'cellmodel',//设置为单元格选择模式Ext.selection.CellModel  
13.     tbar : [{  
14.         text : '取得所选单元格',  
15.         handler : function(){  
16.             var cell = grid.getSelectionModel().getCurrentPosition();  
17.             alert(Ext.JSON.encode(cell));  
18.         }  
19.     }],  
20.     store: {//配置数据源  
21.         fields: ['id','name','age'],//定义字段  
22.         proxy: {  
23.             type: 'memory',//Ext.data.proxy.Memory内存代理  
24.             data : datas,//读取内嵌数据  
25.             reader : 'array'//Ext.data.reader.Array解析器  
26.         },  
27.         autoLoad: true//自动加载  
28.     },  
29.     columns: [//配置表格列  
30.         {header: "id", width: 30, dataIndex: 'id', sortable: true},  
31.         {header: "姓名", width: 80, dataIndex: 'name', sortable: true},  
32.         {header: "年龄", width: 80, dataIndex: 'age', sortable: true}  
33.     ]  
34. });  

四、Ext.selection.RowModel（行选择模式）示例－－主要相关代码 

Javascript代码  

1. simpleSelect : true,//启用简单选择功能   
2. multiSelect : true,//支持多选  
3. selType: 'rowmodel',//设置为单元格选择模式Ext.selection.RowModel  
4. tbar : [{  
5.     text : '取得所选行',  
6.     handler : function(){  
7.         var msg = '';  
8.         var rows = grid.getSelectionModel().getSelection();  
9.         for(var i = 0; i < rows.length; i++){  
10.             msg = msg + rows[i].get('name') + '\n';  
11.         }  
12.         alert(msg);  
13.     }  
14. }]  

五、Ext.selection.CheckboxModel（复选框选择模式）示例－－关键代码 

Javascript代码  

1. //注册复选框选择模式别名为selection.checkboxmodel  
2. Ext.ClassManager.setAlias('Ext.selection.CheckboxModel','selection.checkboxmodel');  

Javascript代码  

1. multiSelect : true,//支持多选  
2.             selModel: {  
3.                 selType : 'checkboxmodel'//复选框选择模式Ext.selection.CheckboxModel  
4.             },  
5.             tbar : [{  
6.                 text : '取得所选行',  
7.                 handler : function(){  
8.                     var msg = '';  
9.                     var rows = grid.getSelectionModel().getSelection();  
10.                     for(var i = 0; i < rows.length; i++){  
11.                         msg = msg + rows[i].get('name') + '\n';  
12.                     }  
13.                     alert(msg);  
14.                 }  
15.             }]  

六、grid中的features使用 
Ext.grid.feature.RowBody示例－－关键代码

Javascript代码  

1. features: [Ext.create('Ext.grid.feature.RowBody',{  
2.     getAdditionalData: function(data, idx, record, orig) {  
3.         var headerCt = this.view.headerCt,  
4.             colspan  = headerCt.getColumnCount();//获取表格的列数  
5.       
6.         return {  
7.             rowBody: record.get('introduce'),//指定行体内容  
8.             rowBodyCls: 'rowbodyColor',//指定行体样式  
9.             rowBodyColspan: colspan//指定行体跨列的列数  
10.             };  
11.         }  
12.     })]  

Ext.grid.feature.Summary示例－－关键代码

Javascript代码  

1. features: [{  
2.     ftype: 'summary'//Ext.grid.feature.Summary表格汇总特性  
3. }],  
4. columns: [//配置表格列  
5.     {header: "姓名", flex: 1, dataIndex: 'name',   
6.         summaryType: 'count',//求数量  
7.         summaryRenderer: function(value){  
8.             return '员工总数：'+value  
9.         }  
10.     },  
11.     {header: "薪资", flex: 1, dataIndex: 'salary',   
12.         summaryType: 'average',//求平均值  
13.         summaryRenderer: function(value){  
14.             return '平均薪资：'+value  
15.         }  
16.     }  
17. ]  

Ext.grid.feature.Grouping示例－－关键代码

Javascript代码  

1. features: [Ext.create('Ext.grid.feature.Grouping', {  
2.     groupByText : '用本字段分组',  
3.     showGroupsText : '显示分组',  
4.     groupHeaderTpl: '性别: {name} ({rows.length})', //分组标题模版  
5.     startCollapsed: true //设置初始分组是否收起   
6. })],  
7. columns: [//配置表格列  
8.     {header: "姓名", flex: 1, dataIndex: 'name'},  
9.     {header: "性别", flex: 1, dataIndex: 'sex'},  
10.     {header: "年龄", flex: 1, dataIndex: 'age'}  
11. ]  

Ext.grid.feature.GroupingSummary示例－－关键代码

Javascript代码  

1. features: [Ext.create('Ext.grid.feature.GroupingSummary', {  
2.     groupByText : '用本字段分组',  
3.     showGroupsText : '显示分组',  
4.     groupHeaderTpl: '性别: {name} ({rows.length})', //分组标题模版  
5.     startCollapsed: true //设置初始分组是否收起   
6. })],  
7. columns: [//配置表格列  
8.     {header: "姓名", width: 100, dataIndex: 'name',   
9.         summaryType: 'count',//求数量  
10.         summaryRenderer: function(value){  
11.             return '员工总数：'+value  
12.         }  
13.     },  
14.     {header: "性别", width: 50, dataIndex: 'sex'},  
15.     {header: "年龄", width: 110, dataIndex: 'age',   
16.         summaryType: 'average',//求数量  
17.         summaryRenderer: function(value){  
18.             return '平均年龄：'+value  
19.         }  
20.     }  
21. ]  

七、Ext.grid.plugin.CellEditing示例－－关键代码 

Javascript代码  

1. plugins: [  
2.     Ext.create('Ext.grid.plugin.CellEditing', {  
3.         clicksToEdit: 1//设置鼠标单击1次进入编辑状态  
4.     })  
5. ],  
6. selType: 'cellmodel',//设置为单元格选择模式  
7. columns: [//配置表格列  
8.   Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35}),  
9.   {header: "姓名", width: 50, dataIndex: 'name',  
10.         editor: {//文本字段  
11.             xtype:'textfield',  
12.             allowBlank:false  
13.         }  
14.     },  
15.     {header: "生日", width: 100, dataIndex: 'birthday',   
16.         xtype : 'datecolumn',//Ext.grid.column.Date日期列  
17.         format : 'Y年m月d日',//日期格式化字符串  
18.         editor: {//日期字段  
19.             xtype:'datefield',  
20.             allowBlank:false  
21.         }  
22.     },  
23.     {header: "薪资", width: 50, dataIndex: 'salary',   
24.         xtype: 'numbercolumn',//Ext.grid.column.Number数字列  
25.         format:'0,000',//数字格式化字符串  
26.         editor: {//数字字段  
27.             xtype:'numberfield',  
28.             allowBlank:false  
29.         }  
30.     }  
31. ]  

八、Ext.grid.plugin.RowEditing示例－－关键代码 

Javascript代码  

1. plugins: [  
2.     //行编辑模式  
3.     Ext.create('Ext.grid.plugin.RowEditing', {  
4.         clicksToEdit: 1  
5.     })  
6. ],  
7. selType: 'rowmodel',//设置为单元格选择模式  
8. columns: [//配置表格列  
9.     Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35}),  
10.     {header: "姓名", width: 50, dataIndex: 'name',  
11.         editor: {//文本字段  
12.             xtype:'textfield',  
13.             allowBlank:false  
14.         }  
15.     },  
16.     {header: "生日", width: 100, dataIndex: 'birthday',   
17.         xtype : 'datecolumn',//Ext.grid.column.Date日期列  
18.         format : 'Y年m月d日',//日期格式化字符串  
19.         editor: {//日期字段  
20.             xtype:'datefield',  
21.             allowBlank:false  
22.         }  
23.     },  
24.     {header: "薪资", width: 50, dataIndex: 'salary',   
25.         xtype: 'numbercolumn',//Ext.grid.column.Number数字列  
26.         format:'0,000',//数字格式化字符串  
27.         editor: {//数字字段  
28.             xtype:'numberfield',  
29.             allowBlank:false  
30.         }  
31.     }  
32. ]  

九、Ext.grid.plugin.DragDrop示例－－关键代码 

Javascript代码  

1. viewConfig: {  
2.     plugins: [  
3.         //行编辑模式  
4.         Ext.create('Ext.grid.plugin.DragDrop',{  
5.             dragGroup: 'grid1',//拖拽组名称  
6.             dropGroup: 'grid2'//拖放组名称  
7.         })  
8.     ]  
9. }  

十、Ext.grid.property.Grid示例 

Javascript代码  

1. //创建属性表格  
2. var grid = new Ext.grid.property.Grid({  
3.     title: 'Ext.grid.property.Grid示例',  
4.     width: 300,  
5.     height: 200,  
6.     renderTo: Ext.getBody(),  
7.     //自定义属性编辑器  
8.     customEditors : {  
9.         "性别" : new Ext.form.ComboBox({  
10.             editable : false,  
11.             displayField:'sex',  
12.             mode: 'local',  
13.             triggerAction: 'all',  
14.             store:new Ext.data.SimpleStore({  
15.                 fields: ['sex'],  
16.                 data : [['男'],['女']]  
17.             })  
18.         }),  
19.         "出生日期": new Ext.form.DateField({  
20.             format : 'Y年m月d日',  
21.             selectOnFocus:true,  
22.             allowBlank : false  
23.         })  
24.     },  
25.     //自定义渲染函数  
26.     customRenderers: {  
27.         //格式化布尔值显示  
28.         "是否已婚": function(v){  
29.             return v?'是':'否';  
30.         },  
31.         //格式化日期显示  
32.         "出生日期": Ext.util.Format.dateRenderer('Y年m月d日')  
33.     },  
34.     source: {  
35.         "员工名称" : "张三",  
36.         "出生日期" : Ext.Date.parse('10/15/2006', 'm/d/Y'),  
37.         "性别" : '男',  
38.         "是否已婚" : false,  
39.         "年龄" : 29  
40.     }  
41. });