Extjs4 中的gird

　　　　grid是Extjs中频率用得比较高的一个组件,所以好的代码一同分享一下。

　　　　　　　　

Ext.onReady(function(){
    
    
    //model
    Ext.define('model',{
        extend: 'Ext.data.Model',
        fields: [
            {name: 'company'},
            {name: 'price', type: 'float'}
        
        ]
        
        });
    
    //store
    var store = Ext.create('Ext.data.Store', {
        storeId: "store",
        model:'model',
        data: [{'company':'one','price':20.2},{company:'two',price:2090.2}]
    });
    
    //序号
    Ext.grid.PageRowNumberer = Ext.extend(Ext.grid.RowNumberer, {
            renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){
                return (store.currentPage - 1) * store.pageSize + rowIndex + 1;
            }
        });  
    
    //表头
    var cm = [ Ext.create('Ext.grid.PageRowNumberer',
                            {header:'序号',60}),
                           {header: "姓名",  120, dataIndex: 'company', sortable: true},
                            {header: "性别", flex: 1, dataIndex: 'price', sortable: false}
                ];
    //选择
    var sm = Ext.create('Ext.selection.CheckboxModel');
     
    //grid
    var grid = Ext.create('Ext.grid.Panel',{
        store: store,
        /*columns: [
            {header: "姓名",  120, dataIndex: 'company', sortable: true},
            {header: "性别", flex: 1, dataIndex: 'price', sortable: false}
        
        ],*/
        columns:cm,
        height:400,
        simpleSelect : true,//启用简单选择功能   
        multiSelect : true,//支持多选 
        selModel: sm,
        selType: 'rowmodel',//设置为单元格选择模式Ext.selection.RowModel  
        viewConfig: {
            stripeRows: true
        },
        renderTo:Ext.getBody()
    });
});

效果如下：

　　　　

　　最后祝大家day day up...