深入浅出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:columns37   })

 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.forceFit15   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:sm21     //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   })

 1 3.8 表格视图--Ext.grid.GridView 2 //表格控件都遵循MVC模型 3 //Ext.data.Store:可看做模型(Model); 4 //Ext.grid.GridPanel:设置的各种监听器可看做控制器(Controller); 5 //Ext.grid.GridView:对应的就是视图(View); 6 //通常情况下不需要自行创建Ext.grid.GridView的实例,Ext.grid.GridPanel会自动生成对应的实例,使用默认的样式将表格显示到页面上; 7 //若希望操作Ext.grid.GridView的属性时,可以通过Ext.grid.GridPanel的getView()函数来获取当前表格使用的视图实例; 8 //与GridView相关的操作都集中在视图的显示功能部分;grid.getView()必须在创建Ext.grid.GridPanel之后调用,它只能获得Ext.grid.GridPanel中创建好的GridView实例; 9 //可以使用Ext.grid.GridPanel的viewConfig参数,在创建GridView时设置一些初始参数;10   var grid = new Ext.grid.GridPanel({   //控制器Controller;11     store:new Ext.data.ArrayStore({     //模型Model;12       data:data,13       fields:meta,14       autoLoad:true15     }),16     columns:meta,17     renderTo:'grid',                    //GridPanel自动创建对应的实例,即视图View;18     width:450,19     height:80,20     viewConfig:{                        //为创建的GridView设置初始参数;21       columnsText:'显示的列',           //中文显示;22       scrollOffset:30,                  //滚动条的宽度,默认是20px;23       sortAscText:'升序',24       sortDescText:'降序',25       forceFit:true                     //自适应列宽;26     }27   });

 1 3.9 表格分页 2 3.9.1 为表格添加分页工具条 3   var grid = new Ext.grid.GridPanel({ 4     renderTo:'grid', 5     autoHeight:true, 6     store:store, 7     columns:columns, 8     bbar:new Ext.PagingToolvar({ 9       pageSize:10,                      //每页显示几条数据;10       store:store,11       displayInfo:true,                 //是否显示数据信息;12       displayMsg:'显示第{0}条到{1}条记录,一共{2}条',13       //用来显示有数据时的提示信息;14       emptyMsg:'没有记录'               //没有记录时显示的信息;15     })16   });17   store.load();                         //必须在构造表格以后执行,否则分页工具条将不起作用;18   //将分页工具条和store相关联,从而实现与表格共享数据模型;19 20 3.9.2 通过后台脚本获得分页数据21   var columns = [{header:'编号',dataIndex:'id'}]22 23   var store = new Ext.data.Store({24     //Store:仓库/存储;它封装了一个客户端缓存,用于存储Model对象;Store通过一个代理Proxy来加载数据,并提供函数来排序/过滤以及查询内部所包含的model实例;25     //而Ext.data.ArrayStore是一个小巧的帮助类,更方便的从一个数组的数据来创建Ext.data.Store;26     proxy:{                           //换掉proxy,不再到内存中查找,而是通过HTTP获得想要的数据;27       type:'Ajax',                    //表示使用Ajax向后台请求数据;28       url:'xxx.jsp',                  //请求地址;29       r