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

　　　　　　　　

1 Ext.onReady(function(){ 2      3      4     //model 5     Ext.define('model',{ 6         extend: 'Ext.data.Model', 7         fields: [ 8             {name: 'company'}, 9             {name: 'price', type: 'float'}10         11         ]12         13         });14     15     //store16     var store = Ext.create('Ext.data.Store', {17         storeId: "store",18         model:'model',19         data: [{'company':'one','price':20.2},{company:'two',price:2090.2}]20     });21     22     //序号23     Ext.grid.PageRowNumberer = Ext.extend(Ext.grid.RowNumberer, {24             renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){25                 return (store.currentPage - 1) * store.pageSize + rowIndex + 1;26             }27         });  28     29     //表头30     var cm = [ Ext.create('Ext.grid.PageRowNumberer',31                             {header:'序号',width:60}),32                            {header: "姓名", width: 120, dataIndex: 'company', sortable: true},33                             {header: "性别", flex: 1, dataIndex: 'price', sortable: false}34                 ];35     //选择36     var sm = Ext.create('Ext.selection.CheckboxModel');37      38     //grid39     var grid = Ext.create('Ext.grid.Panel',{40         store: store,41         /*columns: [42             {header: "姓名", width: 120, dataIndex: 'company', sortable: true},43             {header: "性别", flex: 1, dataIndex: 'price', sortable: false}44         45         ],*/46         columns:cm,47         height:400,48         simpleSelect : true,//启用简单选择功能   49         multiSelect : true,//支持多选 50         selModel: sm,51         selType: 'rowmodel',//设置为单元格选择模式Ext.selection.RowModel  52         viewConfig: {53             stripeRows: true54         },55         renderTo:Ext.getBody()56     });57 });

效果如下：

　　　　

　　最后祝大家day day up...