EXTJS 4.2 资料 控件之Grid 那些事
最近在学习Extjs4.2 ,积累文章,看得不错,再此留年:
//表格数据最起码有列、数据、转换原始数据这3项 Ext.onReady(function(){ //定义列 var columns = [ {header:'编号',dataIndex:'id',width:50}, //sortable:true 可设置是否为该列进行排序 {header:'名称',dataIndex:'name',width:80}, {header:'描述',dataIndex:'descn',width:112}, {header:'状态',dataIndex:'status',width:80,renderer:function(value){ if(value=='可用'){ return "<span style='color:green;font-weight:bold';>可用</span><img src='images/right.gif' />"; } else { return "<span style='color:red;font-weight:bold';>禁用</span><img src='images/wrong.gif' />"; } }} ]; //定义数据 var data =[ ['1','小王','描述01','可用'], ['2','李四','描述02','禁用'], ['3','张三','描述03','可用'], ['4','束洋洋','思考者日记网','可用'], ['5','高飞','描述05','禁用'] ]; //转换原始数据为EXT可以显示的数据 var store = new Ext.data.ArrayStore({ data:data, fields:[ {name:'id'}, //mapping:0 这样的可以指定列显示的位置,0代表第1列,可以随意设置列显示的位置 {name:'name'}, {name:'descn'}, {name:'status'} ] }); //加载数据 store.load(); //表格控件默认使用RowModel,按住shift或者ctrl键单击鼠标就可以选择多行,如果希望只选择一行,可以使用singleSelect:true //我发现我在写的时候,不用的情况下,我试了发现默认就是不可多选的 //var sm = new Ext.grid.RowModel({singleSelect:true}); //创建表格 var grid = new Ext.grid.GridPanel({ renderTo:'grid', //渲染位置 width:450, height:150, //selModel:sm, store:store, //转换后的数据 columns:columns, //显示列 stripeRows:true, //斑马线效果 //enableColumnMove: false, //禁止拖放列 //enableColumnResize: false, //禁止改变列宽度 loadMask:true, //显示遮罩和提示功能,即加载Loading…… //forceFit:true //自动填满表格 viewConfig:{ columnsText:'显示的列', scrollOffset:30, //表格右侧为滚动条预留的宽度,默认为20 sortAscText:'正序', sortDescText:'倒序', forceFit:true //表格会自动延展每列的长度,使内容填满整个表格 } }); });
1.自定义grid的renderer 方法
a.function renderMotif
/改变列颜色自定义renderner方法 function renderMotif(data, cell, record, rowIndex, columnIndex, store){ var value = record.get('name'); cell.style="background-color:"+value; return data; }
列中引用:
{header:'名称',dataIndex:'name',width:80, renderer:renderMotif},
b.function renderDescn
{header:'描述',dataIndex:'descn',width:112,renderer:renderDescn}
//自定义renderner方法
function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store){ var str="<input type='button' value='查询详细信息' onclick='alert(""+ "这个单元格的值是:"+value +"n"+ "这个单元格的配置是:{cellId:"+cellmeta.cellId+",id:"+cellmeta.id+",css:"+cellmeta.css+"}n"+ "这个单元格对应行的record是:"+record +",一行的数据都在里面n"+ "这是第"+rowIndex+"行n"+ "这是第"+columnIndex +"列n"+ "这个表格对应的Ext.data.Store在这里:"+ store +",随便用吧。"+"")' />"; return str; }
说明:
我们可以在渲染函数里得到多个参数,如下所示:
- value:将要显示到单元格里的值;
- cellmeta:单元格的相关属性,主要有id和CSS;
- record:这行的数据对象,如果需要获取其他列的值,可以通过record.data["id"]的方式得到,这个属性很重要,我们经常会用到;
- rowIndex:行号,这里的行号指的是当前页中所有记录的顺序;
- columnIndex:当前列的列号;
- store:构造表格时传递的ds。表格里的所有数据都可以通过store获得。
3.自动显示行号和复选框都是renderer的延伸。先来说自动显示行号,在列模型columns中加入RowNumber对象即可,如下代码
new Ext.grid.RowNumberer(), //自动显示行号
4.获取选中行数据,有点奇怪不知道为什么,在EXTJS3.0和EXTJS4.0里面写法不一样,两者区别:
EXTJS4.0写法: var selectedData = grid.getSelectionModel().getSelection()[0].data; alert(selectedData.Id); EXTJS3.0写法: var selectedData = grid.getSelectionModel().getSelection(); alert(selectedData[0].Id);
我的小鱼你醒了,
还认识早晨吗?
昨夜你曾经说,
愿夜幕永不开启。
初吻吻别的那个季节,
不是已经哭过了吗?
你的香腮边轻轻滑落的,
是你的泪,还是我的泪。
我的指尖还记忆著,
你慌乱的心跳。
温润的体香里,
那一缕长髮飘飘。
——青青树 《魁拔》
交流群:ASP.NET交流群(2群) 58189568
ExtJs4.2交流群(3群)97869295