首页 > 代码库 > EXTJS 4.2 资料 控件之Grid 那些事
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=http://www.mamicode.com/=‘可用‘){ return "<span style=‘color:green;font-weight:bold‘;>可用</span><img src=http://www.mamicode.com/‘images/right.gif‘ />"; } else { return "<span style=‘color:red;font-weight:bold‘;>禁用</span><img src=http://www.mamicode.com/‘images/wrong.gif‘ />"; } }} ]; //定义数据 var data =http://www.mamicode.com/[ [‘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 = http://www.mamicode.com/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=http://www.mamicode.com/‘查询详细信息‘ 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(), //自动显示行号
EXTJS 4.2 资料 控件之Grid 那些事
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。