grid.常规使用

//配置表格列   
{header: "姓名",width: 50,dataIndex: 'name'},{header: "组长",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: "薪资",dataIndex: 'salary',xtype: 'numbercolumn',//Ext.grid.column.Number数字列   
    format:'0,000'//数字格式化字符串   
}  


//grid.column.Action动作列
{ 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',colIndex) {
                           var rec = grid.getStore().getAt(rowIndex);
                           alert("删除 " + rec.get('name'));
                       }
                   },{
                       icon: 'images/save.gif',colIndex) {
                           var rec = grid.getStore().getAt(rowIndex);
                           alert("保存 " + rec.get('name'));
                       }
                   }]
               }
?
?
//定义渲染函数，格式化性别显示   
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;   
}  
columns: [//配置表格列   
                {header: "id",width: 30,dataIndex: 'id'},{header: "姓名",{header: "性别",dataIndex: 'sex',renderer:formatSex},//格式化生日显示   
renderer:Ext.util.Format.dateRenderer('Y年m月d日')             },{header: "年龄",dataIndex: 'age',renderer:formatAge}   
            ]  



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



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


Ext.selection.CellModel（单元格选择模式）示例
//创建表格数据   
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",dataIndex: 'id',sortable: true},width: 80,dataIndex: 'name',sortable: true}   
    ]   
});  



Ext.selection.RowModel（行选择模式）
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（复选框选择模式）
//注册复选框选择模式别名为selection.checkboxmodel   
Ext.ClassManager.setAlias('Ext.selection.CheckboxModel','selection.checkboxmodel');  

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



Ext.grid.feature.Grouping
features: [Ext.create('Ext.grid.feature.Grouping',{   
    groupByText : '用本字段分组',showGroupsText : '显示分组',groupHeaderTpl: '性别: {name} ({rows.length})',//分组标题模版   
    startCollapsed: true //设置初始分组是否收起    
})],dataIndex: 'sex'},dataIndex: 'age'}   
]  



Ext.grid.feature.GroupingSummary
features: [Ext.create('Ext.grid.feature.GroupingSummary',width: 110,//求数量   
        summaryRenderer: function(value){   
            return '平均年龄：'+value   
        }   
    }   
]  



Ext.grid.plugin.CellEditing
plugins: [   
    Ext.create('Ext.grid.plugin.CellEditing',{   
        clicksToEdit: 1//设置鼠标单击1次进入编辑状态   
    })   
],//设置为单元格选择模式   
columns: [//配置表格列   
  Ext.create('Ext.grid.RowNumberer',width : 35}),editor: {//文本字段   
            xtype:'textfield',allowBlank:false  
        }   
    },//Ext.grid.column.Date日期列   
        format : 'Y年m月d日',//日期格式化字符串   
        editor: {//日期字段   
            xtype:'datefield',//Ext.grid.column.Number数字列   
        format:'0,000',//数字格式化字符串   
        editor: {//数字字段   
            xtype:'numberfield',allowBlank:false  
        }   
    }   
]  



Ext.grid.plugin.RowEditing
plugins: [   
    //行编辑模式   
    Ext.create('Ext.grid.plugin.RowEditing',{   
        clicksToEdit: 1   
    })   
],selType: 'rowmodel',//设置为单元格选择模式   
columns: [//配置表格列   
    Ext.create('Ext.grid.RowNumberer',allowBlank:false  
        }   
    }   
]  



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



Ext.grid.property.Grid
//创建属性表格   
var grid = new Ext.grid.property.Grid({   
    title: 'Ext.grid.property.Grid示例',width: 300,height: 200,//自定义属性编辑器   
    customEditors : {   
        "性别" : new Ext.form.ComboBox({   
            editable : false,displayField:'sex',mode: 'local',triggerAction: 'all',store:new Ext.data.SimpleStore({   
                fields: ['sex'],data : [['男'],['女']]   
            })   
        }),"出生日期": new Ext.form.DateField({   
            format : 'Y年m月d日',selectOnFocus:true,allowBlank : false  
        })   
    },//自定义渲染函数   
    customRenderers: {   
        //格式化布尔值显示   
        "是否已婚": function(v){   
            return v?'是':'否';   
        },//格式化日期显示   
        "出生日期": Ext.util.Format.dateRenderer('Y年m月d日')   
    },source: {   
        "员工名称" : "张三","出生日期" : Ext.Date.parse('10/15/2006','m/d/Y'),"性别" : '男',"是否已婚" : false,"年龄" : 29   
    }   
});