3.1 表格的特性简介
 >.Ext中的表格功能:包括排序/缓存/拖动/隐藏某一列/自动显示行号/列汇总/单元格编辑等实用功能;
 >.表格由类Ext.grid.GridPanel定义,继承自Ext.Panel,其xtype为grid;
 >.表格控件必须包含列(columns)定义信息,并指定表格的数据存储器(Ext.data.Store);
 3.2 制作一个简单的表格
   >1.列的定义是一个JSON数组,它是整个表格的列模型,应该首先创建;
   var columns = [
     {header:'编号',dataIndex:'id'},
     //每一行数据元素描述表格的一列信息;  包含首部显示文本(header),列对应的记录集字段(dataIndex);
     {header:'名称',dataIndex:'name'},
     {header:'描述',dataIndex:'descn'}
   ];

   >2.定义表格中要显示的数据;
   var data = [
     ['1','name1','descn1'],
     ['2','name2','descn2'],
     ['3','name3','descn3']
   ]

   >3.创建一个数据存储对象;表格必须配置的属性;负责把各种各样的原始数据(如二维数组,JSON,XML等)转换成Ext.data.Record类型的对象;
   var store = new Ext.data.ArrayStore({
     data:data,
     fields:[
     //这里定义的3个名称与columns的dataIndex相对应;将data数据与columns列模型链接;
       {name:'id'},
       //{name:'id',mapping:1},    //可以设置mapping来设置列的排序;
       {name:'name'},
       {name:'descn'}
     ]
   });
   store.load();   //初始化数据;
   //store对应两个部分:proxy(指获取数据的方式)和render(指如何解析这一堆数据);

   >4.创建表格
   var grid = new Ext.grid.GridPanel({
     autoHeight:true,
     renderTo:'grid',    //指示Ext将表格渲染到什么地方;
     store:store,
     columns:columns
   })
 3.3 表格常用功能
 3.3.1 部分属性功能
   >1.enableColumnMove       拖放移动列;
   >2.enableColumnResize     改变列宽;
   >3.stripeRows             斑马线效果;
   >4.loadMask               显示"Loading..."

 3.3.2 自主决定每列的宽度
 //每列默认是100px;
   >1.自定义列宽
   var columns = [
     {header:'编号',dataIndex:'id',width:200}
   ]
   >2.forceFit
   var grid = new Ext.grid.GiidPanel({
     renderTo:'grid',
     forceFit:true         //让每列自适应填满表格;
   });

 3.3.3 sortable表格列排序
   var columns = new Ext.grid.ColumnModel([
     {header:'编号',dataIndex:'id',sortable:true}
   ])
   //Ascending:正序; Descending:倒序;

 3.3.4 中文排序

 3.3.5 显示日期类型数据
 //Ext可以从后台取得日期类型的数据,交给表格进行格式化;
   var columns = [{header:'日期',dataIndex:'date',renderer:Ext.util.Format.dateRenderer('Y-m-d')}];
   //renderer的属性值就是Ext提供的日期格式化方法;
   var data = [['1','name1','descn1','1970-01-15T02:58:04']]
   var store = new Ext.data.ArrayStore({
     data:data,
     fields:[{name:'date',type:'date',dateFormat:'Y-m-dTH:i:s'}]
     //type属性告诉ExtJS解析数据时按日期类型处理;
     //dateFormat:将数据中的字符串格式转换成日期格式;
   });
 3.4 表格渲染
   >1.修改文字颜色样式和添加图片;
   function renderSex(value){
     if(value == 'male'){
       return "<span style='color:red; font-weight:bold'>红男</span><img src="user_male.png" />";
     }else{
       return "<span style='color:green, font-weight:bold'>绿女</span><img src="user_female.png" />";
     };
     //在返回value之前,拼装上相应的HTML和CSS即可;
   };
   var columns = [{header:'性别',dataIndex:'sex',renderer:renderSex}];
   //renderer的值是一个自定义函数;
   >2.其他可用参数
   function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store){
     var str = value+cellmeta+record+rowIndex+columnIndex+store;
     return str;
   }
   //value:将要显示到单元格的值;
   //cellmeta:单元格的属性,主要有id和CSS;
   //record:所在行的数据对象;
   //rowIndex:所在行行号;
   //columnIndex:所在列列号;
   //store:构造表格传递的ds;
 3.5 给表格的行和列设置颜色
   <style>.yellow-row{ background-color: #FBF8BF !important; }</style>
   Ext.onReady(function(){

     var data = [['boy',0,'#fbf8bf']];     //表格数据;

     var store = new Ext.data.ArraySotre({ //数据存储对象;
       data:data,                          //引入表格数据; 并将数据转换成Ext.data.Record类型的对象;
       fields:[                            //与columns参数对应;
         {name:'name',type:'string'},
         {name:'sex',type:'int'},
         {name:'color',type:'string'}
       ]
     });
     store.load();                         //初始化数据;

     var grid = new Ext.grid.GridPanel({
       store:store,                        //引入record数据对象;
       columns:[                           //创建列模型;
         {header:'name',dataIndex:'name'},
         {header:'sex',dataIndex:'sex'}
       ],
       renderTo:'grid',
       viewConfig:{
         enableRowBody:true,
         getRowClass:function(record,rowIndex,p,ds){
           var cls = 'white-row';          //默认是白色;
           switch(record.data.color){      //先查找record对象即store,再查找data属性,再查找到color在data里对应的值;
             case '#fbf8bf':               //匹配值,设置class名;
               cls = "yellow-row"
               break;
           }
           return cls;
         }
       }
     });
   });
 3.6 自动显示行号和复选框
 3.6.1 自动显示行号
   var columns = [
     new Ext.grid.RowNmuberer(),
     //在列模型中加入RowNumberer对象,
     {header:'姓名',dataIndex:'name'}
   ]
   >.删除行/刷新表格
   Ext.get('remove').on('click',function(){
     store.remove(store.getAt(0));         //删除第一条数据;
     grid.view.refresh();                  //刷新视图重新加载store,并重新渲染模板的数据;
   })

 3.6.2 复选框
   var sm = new Ext.selection.CheckboxModel({checkOnly:true});
   //CheckboxModel会在每行数据前添加一个复选框;
   //checkOnly属性表示是否可以通过选中行进行选取,还是必须选中复选框选取;
   var grid = new Ext.grid.GridPanel({
     ...,
     selModel:sm
     //selModel在总体上控制用户对表格的选择功能;
   })
 3.7 选择模型
 >1.RowModel(行选择模型)
 //在定义Ext.grid.GridPanel时,默认使用RowModel--行选择模型;
   var grid = new Ext.grid.GridPanel({
     ...,
     sm:new Ext.grid.RowModel({singleSelect:true})     //设置只能选中一行;
   })
 >2.CellModel(单元格选择模型)
 //在EditorGrid里默认使用CellModel;
 >3.选中行信息显示
   grid.on('itemclick',function(){
     //表格绑定单机事件;
     var selected = grid.getSelectionModel().selected; //gSM():返回正在使用的选择模型   selected:所有当前已选择的记录的混合集合
     for(var i=0; i<selected.getCount(); i++){
       var record = selected.get(i);
       Ext.Msg.alert('提示',record.get("id")+","+record.get("name")+","+record.get("descn"));
     }
   })
 3.8 表格视图--Ext.grid.GridView
 //表格控件都遵循MVC模型
 //Ext.data.Store:可看做模型(Model);
 //Ext.grid.GridPanel:设置的各种监听器可看做控制器(Controller);
 //Ext.grid.GridView:对应的就是视图(View);
 //通常情况下不需要自行创建Ext.grid.GridView的实例,Ext.grid.GridPanel会自动生成对应的实例,使用默认的样式将表格显示到页面上;
 //若希望操作Ext.grid.GridView的属性时,可以通过Ext.grid.GridPanel的getView()函数来获取当前表格使用的视图实例;
 //与GridView相关的操作都集中在视图的显示功能部分;grid.getView()必须在创建Ext.grid.GridPanel之后调用,它只能获得Ext.grid.GridPanel中创建好的GridView实例;
 //可以使用Ext.grid.GridPanel的viewConfig参数,在创建GridView时设置一些初始参数;
   var grid = new Ext.grid.GridPanel({   //控制器Controller;
     store:new Ext.data.ArrayStore({     //模型Model;
       data:data,
       fields:meta,
       autoLoad:true
     }),
     columns:meta,
     renderTo:'grid',                    //GridPanel自动创建对应的实例,即视图View;
     width:450,
     height:80,
     viewConfig:{                        //为创建的GridView设置初始参数;
       columnsText:'显示的列',           //中文显示;
       scrollOffset:30,                  //滚动条的宽度,默认是20px;
       sortAscText:'升序',
       sortDescText:'降序',
       forceFit:true                     //自适应列宽;
     }
   });
 3.9 表格分页
 3.9.1 为表格添加分页工具条
   var grid = new Ext.grid.GridPanel({
     renderTo:'grid',
     autoHeight:true,
     store:store,
     columns:columns,
     bbar:new Ext.PagingToolvar({
       pageSize:10,                      //每页显示几条数据;
       store:store,
       displayInfo:true,                 //是否显示数据信息;
       displayMsg:'显示第{0}条到{1}条记录,一共{2}条',
       //用来显示有数据时的提示信息;
       emptyMsg:'没有记录'               //没有记录时显示的信息;
     })
   });
   store.load();                         //必须在构造表格以后执行,否则分页工具条将不起作用;
   //将分页工具条和store相关联,从而实现与表格共享数据模型;

 3.9.2 通过后台脚本获得分页数据
   var columns = [{header:'编号',dataIndex:'id'}]

   var store = new Ext.data.Store({
     //Store:仓库/存储;它封装了一个客户端缓存,用于存储Model对象;Store通过一个代理Proxy来加载数据,并提供函数来排序/过滤以及查询内部所包含的model实例;
     //而Ext.data.ArrayStore是一个小巧的帮助类,更方便的从一个数组的数据来创建Ext.data.Store;
     proxy:{                           //换掉proxy,不再到内存中查找,而是通过HTTP获得想要的数据;
       type:'ajax',                    //表示使用Ajax向后台请求数据;
       url:'xxx.jsp',                  //请求地址;
       reader:{                        //不再是解析简单的数组,而是后台传过来的JsonReader,
         type:'json',                  //所以reader设置type为json;
         totalProperty:'totalProperty',//对应JSP中的代码,数据的总数;
         root:'root',                  //JSP中的数据数组;
         idProperty:'id'
       }
     },
     fields:[
       {name:'id'},
       {name:'name'},
       {name:'descn'}
     ]
   });

   var grid = new Ext.grid.GridPanel({...(分页代码)});
   store.load({params:{start:0,limit:10}});  //在初始化时通过传递对应的分页参数去获取希望得到的数据;

 3.9.3 分页工具条在表格顶部
   var grid = new Ext.grid.GridPanel({
     ...
     tbar:new Ext.PagingToolvar({...})       //tbar:顶部工具条;bbar:底部工具条;
   });

 3.9.4 Ext前台分页
 //需要引用PagingMemoryProxy.js,从本地数组读取数据,实现内存分页;
 3.10 后台排序
 //把排序信息提交到后台,由后台排序信息组装到SQL里;然后再由后台将处理好的数据返回给前台;
   var store = new Ext.data.Store({
     proxy:{...},
     fields:[...],
     remoteSort:true                 //是否允许远程排序,默认值是false;
     //向后台提交两个参数:sort(要排序的字段)和dir(升序或降序);
   });
 3.11 多重排序
 //对"Rating"和"Salary"两列进行排序;
   store.sort([{
     property:'rating',
     direction:'DESC'
   },{
     property:'salary',
     direction:'ASC'
   }]);
 3.12 可编辑表格控件--EditorGrid
 3.12.1 制作一个EditorGrid;
   var columns = [{header:'编号',dataIndex:'id',
   editor:{allowBlank:false}}]      //表格不能为空;
   //为每列添加了TextField插件;

   var grid = new Ext.grid.GridPanel({
     columns:columns,
     store:store,
     selType:'cellmodel',          //设置选择模型为单元格模型;默认是:rowmodel;行模型;
     plugins:[
       Ext.create('Ext.grid.plugin.CellEditing',{    //启用CellEditing插件;
         clidksToEdit:1            //设置单击激活编辑器; 默认双击;
       })
     ]
   });

 3.12.2 添加一行数据
   var grid = new Ext.grid.GridPanel({
     autoHeight:true,
     renderTo:'grid',
     store:store,
     columns:columns,
     selType:'cellmodel',
     plugins:[
       Ext.create('Ext.grid.plugin.CellEditing',{
         clicksToEdit:1
       })
     ],
     tbar:['-',{                 //创建顶部工具条; '-':在页面显示'|';
       text:'添加一行',          //按钮显示值;
       handler:function(){       //定义按钮按下时执行的函数;
         var p = {
           id:'',name:'',descn:''//新添加的行对应的列属性;
         };
         store.insert(0,p);      //在第一行的上面添加一个新行;
       }
     },'-',{
       text:'删除一行',
       handler:function(){
         Ext.Msg.confirm('信息','确定要删除?',function(btn){
           //弹出确认窗口;
           if(btn == 'yes'){     //用户选中"yes";
             var sm = grid.getSelectionModel();  //定位选中单元格对象;
             var record = sm.getSelection()[0];  //单元格对应的行模型;
             store.remove(record);               //删除对应行;
           }
         })
       };
     },'-']
   });

 3.12.3 保存修改结果
   接上..,'=',{
     text:'保存',                //添加保存按钮;
     handler:function(){
       var m = store.getModifiedRecrods().slice(0);
       //从Store(数据存储对象)获得所有record(表格行对象);
       var jsonArray = [];
       Ext.each(m,function(item){
         //遍历m数组,并对其中每个元素调用fn函数;
         jsonArray.push(item.data);
       });

       Ext.Ajax.request({
         method:'POST',
         url:'xxx.jsp',
         success:function(response){
           Ext.Msg.alert("信息",response.responseText,function(){
             store.reload();
           })
         },
         failure:function(){
           Ext.Msg.alert("错误","与后台连接出现问题");
         },
         params:'data='+encodeURIComponent(Ext.encode(jsonArray))
       });
     }
   }

 3.12.4 限制输入数据的类型
   var comboData = [
     [0,'新版ext教程'],
     [1,'ext在线支持'],
     [2,'ext扩展']
   ];
   //数据部分单独抽离出来,为了在editor和renderer里保持数据同步;
   var columns = [{
     header:'数字列',
     dataIndex:'number',
     editor:new Ext.form.NumberField({
       allowBlank:false,         //不为空;
       allowNegative:false,      //不为负数;
       maxValue:10               //最长10位;
     })
   },{
     header:'选择列',
     dataIndex:'combo',
     editor:new Ext.form.ComboBox({
       //传统的<input>和<select>域的综合;用户可以自由的在域中键入;
       store:new Ext.data.SimpleStore({
         fields:['value','text'], //绑定模型的字段;
         data:comboData           //读写数据comboData;
       }),
       emptyText:'请选择',
       mode:'local',
       triggerAction:'all',       //触发器被点击时的操作;
       valueField:'value',        //相关的数据值绑定到ComboBox;
       displayField:'text',
       editable:false             //只读模式;
     }),
     renderer:function(value){    //渲染函数;
       return comboData[value][1];//返回comboData数组里的text值;
     }
   },{
     header:'日期列',
     dataIndex:'data',
     editor:new Ext.form.DateField({
       //提供一个带有日期选择器(picker)下拉框并会自动进行日期验证的日期输入表单项;
       format:'Y-m-d',            //日期格式;
       minValue:'2007-12-14',     //日期最小值;
       disabledDays:[0,6],        //禁止选择的日期;
       disabledDaysText:'只能选择工作日'
     }),
     renderer:function(value){
       return Ext.Date.format(value,'Y-m-d');
       //返回格式化的日期字符串;
     }
   },{
     header:'判断列',
     dataIndex:'check',
     editor:new Ext.form.Checkbox({
       allowBlank:false
     }),
     renderer:function(value){
       return value ? '是' : '否';
     }
   }];
 3.13 表格属性控件--PropertyGrid
 3.13.1 简介
 //PropertyGrid(属性表格)扩展自EditGrid,可以直接编辑右边的内容;
   var grid = new Ext.grid.PropertyGrid({
     title:'属性表格',   //表格标题;
     autoHeight:true,    //自适应高度;
     width:300,
     renderTo:'grid',
     viewConfig:{        //初始化设置表格属性;
       forceFit:true     //表格列自适应;
     },
     source:{            //JSON数据,指定了表格里的key和value;
       "名字":"不说",    //string对应TextField编辑器;
       "创建时间":new Date(Date.parse('12/15/2014')),  //date对应DateField编辑器;
       "是否有效":false, //bool对应ComboBox编辑器(下拉列表);
       "版本号":.02,     //number对应NumberField编辑器;
     }
   });

 3.13.2 只读表格
 //PropertyGrid没有直接关闭编辑功能的属性;可以通过Ext的事件监听器实现;
   grid.on("beforeedit",function(e){
     e.cancel = true;
     return false;
   });
 3.14 分组表格控件--GroupingGrid
   var meta = [
     {header:'index',dataIndex:'id',name:'id'}
     {header:'sex',dataIndex:'sex',name:'sex'}
     {header:'name',dataIndex:'name',name:'name'}
     {header:'descn',dataIndex:'descn',name:'descn'}
   ]
   var data = [
     ['1','male','name1','descn1']
     ['2','female','neme2','descn2']
   ]
   var grid = new Ext.grid.GridPanel({
     store:new Ext.data.ArrayStore({ //数据存储器;
       fields:meta,
       data:data,
       groupField:'sex',             //需要分组的域;分组行;
       sortInfo:{field:'id',direction:'ASC'} //排序列;
     }),
     columns:meat,
     features:[{ftype:'grouping'}],  //分组设置;!!!
     renderTo:'grid',
     autoHeight:true
   });

   Ext.get('expand').on('click',function(){
     grid.view.features[0].expandAll();  //展开所有分组;
   });
   Ext.get('collapse').on('click',function(){
     grid.view.features[0].collapseAll();//折叠所有分组;
   });
   Ext.get('one').on('click',function(){ //先判断再操作;
     var feature = grid.view.features[0];//获得feature的实例;
     if(feature.isExpanded('female')){
       feature.expand('female');
       feature.collapse('female');
     }else{
       feature.collapse('female');
       feature.expand('female');
     }
   });
 3.15 可拖拽的表格
 3.15.1 拖放改变表格的大小
   var rz = new Ext.Resizable(grid.getE1(),{ //放在render之后;
     wrap:true,        //在构造Resizable()函数时,自动在指定id的外边包裹一层div
     minHeight:100,
     pinned:true,      //可拖拽提示,一直显示在表格下边;
     handles:'s'       //下边可拖拽;
   });
   rz.on('resize',function(resizer,width,height,event){
     grid.setHeight(height);
     //在拖拽完成之后,调用setHeight()方法修改自己的大小;
   })

 3.15.2 在同一个表格里拖放
   var grid = new Ext.grid.GridPanel({
     renderTo:'grid',store:store,coluns:columns,
     viewConfig:{
       plugins:{       //提供了插件的注册表,通过ptype助记码来编入索引;
         ptype:'gridviewdragdrop'
       }
     }
   });

 3.15.3 表格之间的拖放
 //两个表格都设置了gridviewdragdrop插件,即可互相拖放;
   var grid1 = new Ext.grid.GridPanel({
     ..
     viewConfig:{
       plugins:{ptype:'gridviewdragdrop'}
     }
   });
   var grid2 = new Ext.grid.GridPanel({
     ..
     viewConfig:{
       plugins:{ptype:'gridviewdragdrop'}
     }
   });
 3.16 表格与右键菜单
   var contextmenu = new Ext.menu.Menu({
     id:'theContextMenu',
     items:[{
       text:'查看详情',
       handler:function(){..}//右键函数;
     }]
   });
   grid.on('itemcontextmeun',function(view,record,item,index,e){
     e.preventDefault();     //e:事件对象; 禁止浏览器默认右键菜单;
     contextmenu.showAt(e.getXY());  //显示自定义右键菜单;
   });
 3.17 基于表格的扩展插件
 3.17.1 行编辑器
   columns:[{
     header:'Email',
     dataIndex:'email',
     width:160,
     editor:{
       xtype:'textfield',  //替代全类型创建对象;
       allowBlank:false,
       vtype:'email'
     }
   }]
   plugins:[rowEditing],   //行编辑器控件;

 3.17.2 进度条分页组件
 3.17.3 缓冲式表格视图
 3.17.4 分组表头
   var grid = Ext.create('Ext.grid.Panel',{
     columnLines:true,
     columns:[{
       text:'Company',
       flex:1,
       sortable:false,
       dataIndex:'company'
     },{
       text:'Stock Price',
       columns:[{
         text:'Price',
         renderer:'usMoney',
         dataIndex:'price'
       },{
         text:'Change',
         renderer:change,
         dataIndex:'change'
       }]
     }]
   });
 3.17.5 锁定列

随机推荐

  1. Java Web学习路线

    2016-08-22的早上,本是一个很平静的早上,坐在去往公司的公交车上想到了很多之前上学时的点点滴滴,回想起来还真的是耐人寻味啊,当初青春的懵懂,当初的冲动,当初的做事不考虑后果! 也正是这耐人寻味 ...

  2. asp.net js获取控件ID

    ClientID是由ASP.Net生成的服务器控件得客户端标识符,当这个控件生成到客户端页面的时候,在客户端代码访问该控件时就需要通过ClientID来访问. 以文本框为例: 一.未使用母版页 js可 ...

  3. jquery autocomplete实现读取sql数据库自动补全TextBox

    转自我本良人 原文 jquery autocomplete实现读取sql数据库自动补全TextBox 项目需要这样子一个功能,其他部门提的意见,只好去实现了哦,搞了好久才弄出来,分享一下. 1.前台页 ...

  4. QTP参数化

    使用QTP可以通过将固定值替换为参数,扩展测试范围,可以提高测试的灵活性. 在QTP中,我们可以对以下部分进行参数化: 1.对象属性参数化 2.对象名称的参数化 3.对象方法的参数的参数化

  5. postgres配置主从流复制

    postgres主从流复制 postgres在9.0之后引入了主从的流复制机制,所谓流复制,就是从库通过tcp流从主库中同步相应的数据.postgres的主从看过一个视频,大概效率为3w多事务qps. ...

  6. linux实用的日志分析脚本

    日志分析 随意的tail一个access_log文件,下面是一条经典的访问记录 218.19.140.242 – - [10/Dec/2010:09:31:17 +0800] “GET /query/ ...

  7. ORA-00054:资源正忙,但指定以nowait方式

    PL/SQL执行SQL脚本文件,报错如下: 百度寻找答案,认为是被锁了. select session_id from v$locked_object; 结果没有任何数据.   后来把PL/SQL关闭 ...

  8. Android--Retrofit+RxJava的简单封装(三)

    1,继续接着上一篇的讲讲,话说如果像上一篇这样的话,那么我们每一次请求一个结构都要创建一堆的Retrofit对象,而且代码都是相同的,我们可以试试封装一下 先创建一个HttpMethods类,将Ret ...

  9. 【vijos1266】搜集环盖

    题意 百事任何饮料的瓶盖上都会有一个百事球星的名字. 假设有\(n\)个不同的球星名字,每个名字出现的概率相同,平均需要买几瓶饮料才能凑齐所有的名字呢? 分析 设凑齐\(i\)个球星的期望次数为\(f ...

  10. 算法的上帝——Donald E.Knuth(转)

    开始介绍前先膜拜之~ 密尔沃基市,是美国威斯康辛州最大的城市.1938年1月10日,圣诞刚过不久,密尔沃基市民像往常一样平静地生活着.咖啡店里,有人在议论着罗斯 福总统的救市新政策,有人在议论着到底该 ...