深入浅出ExtJS 第三章表格控件

最新推荐文章于 2023-12-06 16:40:25 发布

weixin_33834628

最新推荐文章于 2023-12-06 16:40:25 发布

阅读量242

点赞数

文章标签： json 测试

原文链接：http://www.cnblogs.com/yizihan/p/4213887.html

版权

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   })

 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:true
15     }),
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       reader:{                        //不再是解析简单的数组,而是后台传过来的JsonReader,
30         type:'json',                  //所以reader设置type为json;
31         totalProperty:'totalProperty',//对应JSP中的代码,数据的总数;
32         root:'root',                  //JSP中的数据数组;
33         idProperty:'id'
34       }
35     },
36     fields:[
37       {name:'id'},
38       {name:'name'},
39       {name:'descn'}
40     ]
41   });
42 
43   var grid = new Ext.grid.GridPanel({...(分页代码)});
44   store.load({params:{start:0,limit:10}});  //在初始化时通过传递对应的分页参数去获取希望得到的数据;
45 
46 3.9.3 分页工具条在表格顶部
47   var grid = new Ext.grid.GridPanel({
48     ...
49     tbar:new Ext.PagingToolvar({...})       //tbar:顶部工具条;bbar:底部工具条;
50   });
51 
52 3.9.4 Ext前台分页
53 //需要引用PagingMemoryProxy.js,从本地数组读取数据,实现内存分页;

1 3.10 后台排序
2 //把排序信息提交到后台,由后台排序信息组装到SQL里;然后再由后台将处理好的数据返回给前台;
3   var store = new Ext.data.Store({
4     proxy:{...},
5     fields:[...],
6     remoteSort:true                 //是否允许远程排序,默认值是false;
7     //向后台提交两个参数:sort(要排序的字段)和dir(升序或降序);
8   });

1 3.11 多重排序
2 //对"Rating"和"Salary"两列进行排序;
3   store.sort([{
4     property:'rating',
5     direction:'DESC'
6   },{
7     property:'salary',
8     direction:'ASC'
9   }]);

  1 3.12 可编辑表格控件--EditorGrid
  2 3.12.1 制作一个EditorGrid;
  3   var columns = [{header:'编号',dataIndex:'id',
  4   editor:{allowBlank:false}}]      //表格不能为空; 
  5   //为每列添加了TextField插件;
  6   
  7   var grid = new Ext.grid.GridPanel({
  8     columns:columns,
  9     store:store,
 10     selType:'cellmodel',          //设置选择模型为单元格模型;默认是:rowmodel;行模型;    
 11     plugins:[
 12       Ext.create('Ext.grid.plugin.CellEditing',{    //启用CellEditing插件;
 13         clidksToEdit:1            //设置单击激活编辑器; 默认双击;
 14       })
 15     ]
 16   });
 17 
 18 3.12.2 添加一行数据
 19   var grid = new Ext.grid.GridPanel({
 20     autoHeight:true,
 21     renderTo:'grid',
 22     store:store,
 23     columns:columns,
 24     selType:'cellmodel',
 25     plugins:[
 26       Ext.create('Ext.grid.plugin.CellEditing',{
 27         clicksToEdit:1
 28       })
 29     ],
 30     tbar:['-',{                 //创建顶部工具条; '-':在页面显示'|';
 31       text:'添加一行',          //按钮显示值;
 32       handler:function(){       //定义按钮按下时执行的函数;
 33         var p = {
 34           id:'',name:'',descn:''//新添加的行对应的列属性;
 35         };
 36         store.insert(0,p);      //在第一行的上面添加一个新行;
 37       }
 38     },'-',{
 39       text:'删除一行',
 40       handler:function(){
 41         Ext.Msg.confirm('信息','确定要删除?',function(btn){
 42           //弹出确认窗口;
 43           if(btn == 'yes'){     //用户选中"yes";
 44             var sm = grid.getSelectionModel();  //定位选中单元格对象;
 45             var record = sm.getSelection()[0];  //单元格对应的行模型;
 46             store.remove(record);               //删除对应行;
 47           }
 48         })
 49       };
 50     },'-']
 51   });
 52 
 53 3.12.3 保存修改结果
 54   接上..,'=',{
 55     text:'保存',                //添加保存按钮;
 56     handler:function(){
 57       var m = store.getModifiedRecrods().slice(0);
 58       //从Store(数据存储对象)获得所有record(表格行对象);
 59       var jsonArray = [];
 60       Ext.each(m,function(item){
 61         //遍历m数组,并对其中每个元素调用fn函数;
 62         jsonArray.push(item.data);
 63       });
 64 
 65       Ext.Ajax.request({
 66         method:'POST',
 67         url:'xxx.jsp',
 68         success:function(response){
 69           Ext.Msg.alert("信息",response.responseText,function(){
 70             store.reload();
 71           })
 72         },
 73         failure:function(){
 74           Ext.Msg.alert("错误","与后台连接出现问题");
 75         },
 76         params:'data='+encodeURIComponent(Ext.encode(jsonArray))
 77       });
 78     }
 79   }
 80 
 81 3.12.4 限制输入数据的类型
 82   var comboData = [
 83     [0,'新版ext教程'],
 84     [1,'ext在线支持'],
 85     [2,'ext扩展']
 86   ];
 87   //数据部分单独抽离出来,为了在editor和renderer里保持数据同步;
 88   var columns = [{
 89     header:'数字列',
 90     dataIndex:'number',
 91     editor:new Ext.form.NumberField({
 92       allowBlank:false,         //不为空;
 93       allowNegative:false,      //不为负数;
 94       maxValue:10               //最长10位;
 95     })
 96   },{
 97     header:'选择列',
 98     dataIndex:'combo',
 99     editor:new Ext.form.ComboBox({
100       //传统的<input>和<select>域的综合;用户可以自由的在域中键入;
101       store:new Ext.data.SimpleStore({
102         fields:['value','text'], //绑定模型的字段;
103         data:comboData           //读写数据comboData;
104       }),
105       emptyText:'请选择',
106       mode:'local',
107       triggerAction:'all',       //触发器被点击时的操作;
108       valueField:'value',        //相关的数据值绑定到ComboBox;    
109       displayField:'text',  
110       editable:false             //只读模式;
111     }),
112     renderer:function(value){    //渲染函数;
113       return comboData[value][1];//返回comboData数组里的text值;
114     }
115   },{
116     header:'日期列',
117     dataIndex:'data',
118     editor:new Ext.form.DateField({
119       //提供一个带有日期选择器(picker)下拉框并会自动进行日期验证的日期输入表单项;
120       format:'Y-m-d',            //日期格式;
121       minValue:'2007-12-14',     //日期最小值;
122       disabledDays:[0,6],        //禁止选择的日期;
123       disabledDaysText:'只能选择工作日'
124     }),
125     renderer:function(value){
126       return Ext.Date.format(value,'Y-m-d');
127       //返回格式化的日期字符串;
128     }
129   },{
130     header:'判断列',
131     dataIndex:'check',
132     editor:new Ext.form.Checkbox({
133       allowBlank:false
134     }),
135     renderer:function(value){
136       return value ? '是' : '否';
137     }
138   }];

 1 3.13 表格属性控件--PropertyGrid
 2 3.13.1 简介
 3 //PropertyGrid(属性表格)扩展自EditGrid,可以直接编辑右边的内容;
 4   var grid = new Ext.grid.PropertyGrid({
 5     title:'属性表格',   //表格标题;
 6     autoHeight:true,    //自适应高度;
 7     width:300,
 8     renderTo:'grid',
 9     viewConfig:{        //初始化设置表格属性;
10       forceFit:true     //表格列自适应;
11     },
12     source:{            //JSON数据,指定了表格里的key和value;
13       "名字":"不说",    //string对应TextField编辑器;
14       "创建时间":new Date(Date.parse('12/15/2014')),  //date对应DateField编辑器;
15       "是否有效":false, //bool对应ComboBox编辑器(下拉列表);
16       "版本号":.02,     //number对应NumberField编辑器;
17     }
18   });
19 
20 3.13.2 只读表格
21 //PropertyGrid没有直接关闭编辑功能的属性;可以通过Ext的事件监听器实现;
22   grid.on("beforeedit",function(e){
23     e.cancel = true;
24     return false;
25   });

 1 3.14 分组表格控件--GroupingGrid
 2   var meta = [
 3     {header:'index',dataIndex:'id',name:'id'}
 4     {header:'sex',dataIndex:'sex',name:'sex'}
 5     {header:'name',dataIndex:'name',name:'name'}
 6     {header:'descn',dataIndex:'descn',name:'descn'}
 7   ]
 8   var data = [
 9     ['1','male','name1','descn1']
10     ['2','female','neme2','descn2']
11   ]
12   var grid = new Ext.grid.GridPanel({
13     store:new Ext.data.ArrayStore({ //数据存储器;
14       fields:meta,
15       data:data,
16       groupField:'sex',             //需要分组的域;分组行;
17       sortInfo:{field:'id',direction:'ASC'} //排序列;
18     }),
19     columns:meat,
20     features:[{ftype:'grouping'}],  //分组设置;!!!
21     renderTo:'grid',
22     autoHeight:true
23   });
24 
25   Ext.get('expand').on('click',function(){
26     grid.view.features[0].expandAll();  //展开所有分组;
27   });
28   Ext.get('collapse').on('click',function(){
29     grid.view.features[0].collapseAll();//折叠所有分组;
30   });
31   Ext.get('one').on('click',function(){ //先判断再操作;
32     var feature = grid.view.features[0];//获得feature的实例;
33     if(feature.isExpanded('female')){
34       feature.expand('female');
35       feature.collapse('female');
36     }else{
37       feature.collapse('female');
38       feature.expand('female');
39     }
40   });

 1 3.15 可拖拽的表格
 2 3.15.1 拖放改变表格的大小
 3   var rz = new Ext.Resizable(grid.getE1(),{ //放在render之后;
 4     wrap:true,        //在构造Resizable()函数时,自动在指定id的外边包裹一层div
 5     minHeight:100,
 6     pinned:true,      //可拖拽提示,一直显示在表格下边;
 7     handles:'s'       //下边可拖拽;
 8   });
 9   rz.on('resize',function(resizer,width,height,event){
10     grid.setHeight(height);
11     //在拖拽完成之后,调用setHeight()方法修改自己的大小;
12   })
13 
14 3.15.2 在同一个表格里拖放
15   var grid = new Ext.grid.GridPanel({
16     renderTo:'grid',store:store,coluns:columns,
17     viewConfig:{
18       plugins:{       //提供了插件的注册表,通过ptype助记码来编入索引;
19         ptype:'gridviewdragdrop'
20       }
21     }
22   });
23 
24 3.15.3 表格之间的拖放
25 //两个表格都设置了gridviewdragdrop插件,即可互相拖放;
26   var grid1 = new Ext.grid.GridPanel({
27     ..
28     viewConfig:{
29       plugins:{ptype:'gridviewdragdrop'}
30     }
31   });
32   var grid2 = new Ext.grid.GridPanel({
33     ..
34     viewConfig:{
35       plugins:{ptype:'gridviewdragdrop'}
36     }
37   });

 1 3.16 表格与右键菜单
 2   var contextmenu = new Ext.menu.Menu({
 3     id:'theContextMenu',
 4     items:[{
 5       text:'查看详情',
 6       handler:function(){..}//右键函数;
 7     }]
 8   });
 9   grid.on('itemcontextmeun',function(view,record,item,index,e){
10     e.preventDefault();     //e:事件对象; 禁止浏览器默认右键菜单;
11     contextmenu.showAt(e.getXY());  //显示自定义右键菜单;
12   });

 1 3.17 基于表格的扩展插件
 2 3.17.1 行编辑器
 3   columns:[{
 4     header:'Email',
 5     dataIndex:'email',
 6     width:160,
 7     editor:{
 8       xtype:'textfield',  //替代全类型创建对象;
 9       allowBlank:false,
10       vtype:'email'
11     }
12   }]
13   plugins:[rowEditing],   //行编辑器控件;
14 
15 3.17.2 进度条分页组件
16 3.17.3 缓冲式表格视图
17 3.17.4 分组表头
18   var grid = Ext.create('Ext.grid.Panel',{
19     columnLines:true,
20     columns:[{
21       text:'Company',
22       flex:1,
23       sortable:false,
24       dataIndex:'company'
25     },{
26       text:'Stock Price',
27       columns:[{
28         text:'Price',
29         renderer:'usMoney',
30         dataIndex:'price'
31       },{
32         text:'Change',
33         renderer:change,
34         dataIndex:'change'
35       }]
36     }]
37   });
38 3.17.5 锁定列

转载于:https://www.cnblogs.com/yizihan/p/4213887.html

weixin_33834628

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
深入浅出ExtJS 第三章表格控件

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

扫一扫