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. } 

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

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. }] 

xtype: 'actioncolumn',//Ext.grid.column.Action动作列items: [{    icon: 'images/edit.gif',//指定编辑图标资源的URL     handler: function(grid, rowIndex, colIndex) {    //获取被操作的数据记录        var rec = grid.getStore().getAt(rowIndex);        alert("编辑 " + rec.get('name'));    }},{    icon: 'images/del.gif',//指定编辑图标资源的URL     handler: function(grid, rowIndex, colIndex) {        var rec = grid.getStore().getAt(rowIndex);        alert("删除 " + rec.get('name'));    }                },{    icon: 'images/save.gif',//指定编辑图标资源的URL     handler: function(grid, rowIndex, colIndex) {        var rec = grid.getStore().getAt(rowIndex);        alert("保存 " + rec.get('name'));    }                }]

Javascript代码

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

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

Javascript代码

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

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. } 

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

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.             ] 

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

三、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. }); 

//创建表格数据var datas = [[100,'张三',24], [200,'李四',30], [300,'王五',29]];//创建Grid表格组件var grid = Ext.create('Ext.grid.Panel',{title : '单元格选择模式示例',renderTo: Ext.getBody(),width:200,height:170,frame:true,selType: 'cellmodel',//设置为单元格选择模式Ext.selection.CellModeltbar : [{text : '取得所选单元格',handler : function(){var cell = grid.getSelectionModel().getCurrentPosition();alert(Ext.JSON.encode(cell));}}],store: {//配置数据源        fields: ['id','name','age'],//定义字段        proxy: {            type: 'memory',//Ext.data.proxy.Memory内存代理            data : datas,//读取内嵌数据            reader : 'array'//Ext.data.reader.Array解析器        },        autoLoad: true//自动加载    },columns: [//配置表格列{header: "id", width: 30, dataIndex: 'id', sortable: true},{header: "姓名", width: 80, dataIndex: 'name', sortable: true},{header: "年龄", width: 80, dataIndex: 'age', sortable: true}]});

四、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. }] 

simpleSelect : true,//启用简单选择功能 multiSelect : true,//支持多选selType: 'rowmodel',//设置为单元格选择模式Ext.selection.RowModeltbar : [{text : '取得所选行',handler : function(){var msg = '';var rows = grid.getSelectionModel().getSelection();for(var i = 0; i < rows.length; i++){msg = msg + rows[i].get('name') + '\n';}alert(msg);}}]

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

Javascript代码

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

//注册复选框选择模式别名为selection.checkboxmodelExt.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.             }] 

multiSelect : true,//支持多选selModel: {selType : 'checkboxmodel'//复选框选择模式Ext.selection.CheckboxModel},tbar : [{text : '取得所选行',handler : function(){var msg = '';var rows = grid.getSelectionModel().getSelection();for(var i = 0; i < rows.length; i++){msg = msg + rows[i].get('name') + '\n';}alert(msg);}}]

六、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.     })] 

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

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. ] 

features: [{ftype: 'summary'//Ext.grid.feature.Summary表格汇总特性}],columns: [//配置表格列{header: "姓名", flex: 1, dataIndex: 'name', summaryType: 'count',//求数量summaryRenderer: function(value){return '员工总数：'+value}},{header: "薪资", flex: 1, dataIndex: 'salary', summaryType: 'average',//求平均值summaryRenderer: function(value){return '平均薪资：'+value}}]

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. ] 

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

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. ] 

features: [Ext.create('Ext.grid.feature.GroupingSummary', {groupByText : '用本字段分组',showGroupsText : '显示分组',    groupHeaderTpl: '性别: {name} ({rows.length})', //分组标题模版    startCollapsed: true //设置初始分组是否收起 })],columns: [//配置表格列{header: "姓名", width: 100, dataIndex: 'name', summaryType: 'count',//求数量summaryRenderer: function(value){return '员工总数：'+value}},{header: "性别", width: 50, dataIndex: 'sex'},{header: "年龄", width: 110, dataIndex: 'age', summaryType: 'average',//求数量summaryRenderer: function(value){return '平均年龄：'+value}}]

七、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. ] 

plugins: [Ext.create('Ext.grid.plugin.CellEditing', {    clicksToEdit: 1//设置鼠标单击1次进入编辑状态})],selType: 'cellmodel',//设置为单元格选择模式columns: [//配置表格列  Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35}),  {header: "姓名", width: 50, dataIndex: 'name',editor: {//文本字段            xtype:'textfield',            allowBlank:false        }},{header: "生日", width: 100, dataIndex: 'birthday', xtype : 'datecolumn',//Ext.grid.column.Date日期列format : 'Y年m月d日',//日期格式化字符串editor: {//日期字段            xtype:'datefield',            allowBlank:false        }},{header: "薪资", width: 50, dataIndex: 'salary', xtype: 'numbercolumn',//Ext.grid.column.Number数字列format:'0,000',//数字格式化字符串editor: {//数字字段            xtype:'numberfield',            allowBlank:false        }}]

八、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. ] 

plugins: [    //行编辑模式Ext.create('Ext.grid.plugin.RowEditing', {        clicksToEdit: 1    })],selType: 'rowmodel',//设置为单元格选择模式columns: [//配置表格列    Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35}),{header: "姓名", width: 50, dataIndex: 'name',editor: {//文本字段            xtype:'textfield',            allowBlank:false        }},{header: "生日", width: 100, dataIndex: 'birthday', xtype : 'datecolumn',//Ext.grid.column.Date日期列format : 'Y年m月d日',//日期格式化字符串editor: {//日期字段            xtype:'datefield',            allowBlank:false        }},{header: "薪资", width: 50, dataIndex: 'salary', xtype: 'numbercolumn',//Ext.grid.column.Number数字列format:'0,000',//数字格式化字符串editor: {//数字字段            xtype:'numberfield',            allowBlank:false        }}]

九、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. } 

viewConfig: {    plugins: [        //行编辑模式Ext.create('Ext.grid.plugin.DragDrop',{dragGroup: 'grid1',//拖拽组名称dropGroup: 'grid2'//拖放组名称})]}

十、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. });