extjs 4 grid

一、grid的例：

Javascript代码 ​​​​ 

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

//配置表格列
{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代码 ​​​​ 

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

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代码 ​​​​ 

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

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

Javascript代码 ​​​​ 

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

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

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

Javascript代码 ​​​​ 

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

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

Javascript代码 ​​​​ 

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

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代码 ​​​​ 

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

//创建表格数据
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.CellModel
    tbar : [{
        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代码 ​​​​ 

2. simpleSelect : true,//启用简单选择功能    
3. multiSelect : true,//支持多选   
4. selType: 'rowmodel',//设置为单元格选择模式Ext.selection.RowModel   
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. }]  

simpleSelect : true,//启用简单选择功能 
multiSelect : true,//支持多选
selType: 'rowmodel',//设置为单元格选择模式Ext.selection.RowModel
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);
  }
}]

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

Javascript代码 ​​​​ 

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

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

Javascript代码 ​​​​ 

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

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代码 ​​​​ 

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

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代码 ​​​​ 

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

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代码 ​​​​ 

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

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代码 ​​​​ 

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

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代码 ​​​​ 

2. plugins: [   
3.     Ext.create('Ext.grid.plugin.CellEditing', {   
4.         clicksToEdit: 1//设置鼠标单击1次进入编辑状态   
5.     })   
6. ],   
7. selType: 'cellmodel',//设置为单元格选择模式   
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.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代码 ​​​​ 

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

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代码 ​​​​ 

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

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

十、Ext.grid.property.Grid示例

Javascript代码 ​​​​ 

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