深入浅出ExtJS 第三章 表格控件(未完)

1 3.1 表格的特性简介
2 >.Ext中的表格功能:包括排序/缓存/拖动/隐藏某一列/自动显示行号/列汇总/单元格编辑等实用功能;
3 >.表格由类Ext.grid.GridPanel定义,继承自Ext.Panel,其xtype为grid;
4 >.表格控件必须包含列(columns)定义信息,并指定表格的数据存储器(Ext.data.Store);

 1 3.2 制作一个简单的表格
 2   >1.列的定义是一个JSON数组,它是整个表格的列模型,应该首先创建;
 3   var columns = [
 4     {header:‘编号‘,dataIndex:‘id‘},
 5     //每一行数据元素描述表格的一列信息;  包含首部显示文本(header),列对应的记录集字段(dataIndex);
 6     {header:‘名称‘,dataIndex:‘name‘},
 7     {header:‘描述‘,dataIndex:‘descn‘}
 8   ];
 9 
10   >2.定义表格中要显示的数据;
11   var data = [
12     [‘1‘,‘name1‘,‘descn1‘],
13     [‘2‘,‘name2‘,‘descn2‘],
14     [‘3‘,‘name3‘,‘descn3‘]
15   ]
16 
17   >3.创建一个数据存储对象;表格必须配置的属性;负责把各种各样的原始数据(如二维数组,JSON,XML等)转换成Ext.data.Record类型的对象;
18   var store = new Ext.data.ArrayStore({
19     data:data,
20     fields:[
21     //这里定义的3个名称与columns的dataIndex相对应;将data数据与columns列模型链接;
22       {name:‘id‘},
23       //{name:‘id‘,mapping:1},    //可以设置mapping来设置列的排序;
24       {name:‘name‘},
25       {name:‘descn‘}
26     ]
27   });
28   store.load();   //初始化数据;
29   //store对应两个部分:proxy(指获取数据的方式)和render(指如何解析这一堆数据);
30 
31   >4.创建表格
32   var grid = new Ext.grid.GridPanel({
33     autoHeight:true,
34     renderTo:‘grid‘,    //指示Ext将表格渲染到什么地方;
35     store:store,
36     columns:columns
37   })

 1 3.3 表格常用功能
 2 3.3.1 部分属性功能
 3   >1.enableColumnMove       拖放移动列;
 4   >2.enableColumnResize     改变列宽;
 5   >3.stripeRows             斑马线效果;
 6   >4.loadMask               显示"Loading..."
 7 
 8 3.3.2 自主决定每列的宽度
 9 //每列默认是100px;
10   >1.自定义列宽
11   var columns = [
12     {header:‘编号‘,dataIndex:‘id‘,width:200}
13   ]
14   >2.forceFit
15   var grid = new Ext.grid.GiidPanel({
16     renderTo:‘grid‘,
17     forceFit:true         //让每列自适应填满表格;
18   });
19 
20 3.3.3 sortable表格列排序
21   var columns = new Ext.grid.ColumnModel([
22     {header:‘编号‘,dataIndex:‘id‘,sortable:true}
23   ])
24   //Ascending:正序; Descending:倒序;
25 
26 3.3.4 中文排序
27 
28 3.3.5 显示日期类型数据
29 //Ext可以从后台取得日期类型的数据,交给表格进行格式化;
30   var columns = [{header:‘日期‘,dataIndex:‘date‘,renderer:Ext.util.Format.dateRenderer(‘Y-m-d‘)}];
31   //renderer的属性值就是Ext提供的日期格式化方法;
32   var data = [[‘1‘,‘name1‘,‘descn1‘,‘1970-01-15T02:58:04‘]]
33   var store = new Ext.data.ArrayStore({
34     data:data,
35     fields:[{name:‘date‘,type:‘date‘,dateFormat:‘Y-m-dTH:i:s‘}]
36     //type属性告诉ExtJS解析数据时按日期类型处理;
37     //dateFormat:将数据中的字符串格式转换成日期格式;
38   });

 1 3.4 表格渲染
 2   >1.修改文字颜色样式和添加图片;
 3   function renderSex(value){
 4     if(value == ‘male‘){
 5       return "<span style=‘color:red; font-weight:bold‘>红男</span><img src="user_male.png" />";
 6     }else{
 7       return "<span style=‘color:green, font-weight:bold‘>绿女</span><img src="user_female.png" />";
 8     };
 9     //在返回value之前,拼装上相应的HTML和CSS即可;
10   };
11   var columns = [{header:‘性别‘,dataIndex:‘sex‘,renderer:renderSex}];
12   //renderer的值是一个自定义函数;
13   >2.其他可用参数
14   function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store){
15     var str = value+cellmeta+record+rowIndex+columnIndex+store;
16     return str;
17   }
18   //value:将要显示到单元格的值;
19   //cellmeta:单元格的属性,主要有id和CSS;
20   //record:所在行的数据对象;
21   //rowIndex:所在行行号;
22   //columnIndex:所在列列号;
23   //store:构造表格传递的ds;

 1 3.5 给表格的行和列设置颜色
 2   <style>.yellow-row{ background-color: #FBF8BF !important; }</style>
 3   Ext.onReady(function(){
 4 
 5     var data = [[‘boy‘,0,‘#fbf8bf‘]];     //表格数据;
 6 
 7     var store = new Ext.data.ArraySotre({ //数据存储对象;
 8       data:data,                          //引入表格数据; 并将数据转换成Ext.data.Record类型的对象;
 9       fields:[                            //与columns参数对应;    
10         {name:‘name‘,type:‘string‘},    
11         {name:‘sex‘,type:‘int‘},
12         {name:‘color‘,type:‘string‘}
13       ]
14     });
15     store.load();                         //初始化数据;
16 
17     var grid = new Ext.grid.GridPanel({
18       store:store,                        //引入record数据对象;
19       columns:[                           //创建列模型;
20         {header:‘name‘,dataIndex:‘name‘},
21         {header:‘sex‘,dataIndex:‘sex‘}
22       ],
23       renderTo:‘grid‘,
24       viewConfig:{
25         enableRowBody:true,
26         getRowClass:function(record,rowIndex,p,ds){
27           var cls = ‘white-row‘;          //默认是白色;
28           switch(record.data.color){      //先查找record对象即store,再查找data属性,再查找到color在data里对应的值;
29             case ‘#fbf8bf‘:               //匹配值,设置class名;
30               cls = "yellow-row"
31               break;
32           }
33           return cls;
34         }
35       }
36     });
37   });

 1 3.6 自动显示行号和复选框
 2 3.6.1 自动显示行号
 3   var columns = [
 4     new Ext.grid.RowNmuberer(),
 5     //在列模型中加入RowNumberer对象,
 6     {header:‘姓名‘,dataIndex:‘name‘}
 7   ]
 8   >.删除行/刷新表格
 9   Ext.get(‘remove‘).on(‘click‘,function(){
10     store.remove(store.getAt(0));         //删除第一条数据;
11     grid.view.refresh();                  //刷新视图重新加载store，并重新渲染模板的数据;
12   })
13 
14 3.6.2 复选框
15   var sm = new Ext.selection.CheckboxModel({checkOnly:true});
16   //CheckboxModel会在每行数据前添加一个复选框;
17   //checkOnly属性表示是否可以通过选中行进行选取,还是必须选中复选框选取;
18   var grid = new Ext.grid.GridPanel({
19     ...,
20     selModel:sm
21     //selModel在总体上控制用户对表格的选择功能;
22   })

 1 3.7 选择模型
 2 >1.RowModel(行选择模型)
 3 //在定义Ext.grid.GridPanel时,默认使用RowModel--行选择模型;
 4   var grid = new Ext.grid.GridPanel({
 5     ...,
 6     sm:new Ext.grid.RowModel({singleSelect:true})     //设置只能选中一行;
 7   })
 8 >2.CellModel(单元格选择模型)
 9 //在EditorGrid里默认使用CellModel;
10 >3.选中行信息显示
11   grid.on(‘itemclick‘,function(){
12     //表格绑定单机事件;
13     var selected = grid.getSelectionModel().selected; //gSM():返回正在使用的选择模型   selected:所有当前已选择的记录的混合集合
14     for(var i=0; i<selected.getCount(); i++){
15       var record = selected.get(i);
16       Ext.Msg.alert(‘提示‘,record.get("id")+","+record.get("name")+","+record.get("descn"));
17     }
18   })