深入浅出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 })
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。