Extjs4 中的gird

　　　　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     //store
16     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     //grid
39     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: true
54         },
55         renderTo:Ext.getBody()
56     });
57 });

效果如下：

　　　　

　　最后祝大家day day up...

 

 

　　 　　

 

posted @ 2013-05-23 08:47  全力以赴001  阅读(522)  评论(0)  编辑  收藏  举报