ExtJS4.2学习(五)表格渲染与复选框

前几章做的例子，你有没有发现太单调啦？呵呵，相信聪明的你一定知道，光显示文字，那这功能太弱爆了吧，现在我们来看下ExtJs给我们带来的表渲染和复选框等功能。 有的人问我了，为什么你们的默认表样式和我做的效果图不一样呢，呵呵，那是因为我引入了ExtJS

前几章做的例子，你有没有发现太单调啦？呵呵，相信聪明的你一定知道，光显示文字，那这功能太弱爆了吧，现在我们来看下ExtJs给我们带来的表格渲染和复选框等功能。

有的人问我了，为什么你们的默认表格样式和我做的效果图不一样呢，呵呵，那是因为我引入了ExtJS4.2的其他样式，并非默认的样式，换样式很简单，只需要更改Link引入的文件就可以很轻松的换各种样式，哇~是不是很给力啊，你敢信？
好了，不扯远了，下面看这章要做的效果图：


怎么样，是不是很丰富？
先来说文字的颜色怎么变吧，详细你学过HTML+CSS一定知道怎么变，同理，在EXTJS里只需要用到renderer即可轻松做成HTML的效果，看下面的代码：

1 2 3 4 5 6 7

{header:'状态',dataIndex:'status',width:80,renderer:function(value){             if(value=='可用'){                 return "<span style="color:green;font-weight:bold"&gt;可用</span&gt;<img src="/static/imghw/default1.png" data-src="/inc/test.jsp?url=http%3A%2F%2Fwww.shuyangyang.com.cn%2Fd%2Ffile%2Fjishuliangongfang%2Fqianduanjishu%2F20131110%2F8fd68484d196d939f8a7ec44bedd8fa9.jpg&amp;refer=http%3A%2F%2Fblog.csdn.net%2Fqingfeng812%2Farticle%2Fdetails%2F19338011" class="lazy" alt="ExtJS4.2学习(五)表格渲染与复选框" &gt;<code&gt;/right.gif' /&gt;";             } else {                 return "<span style="&lt;/code"&gt;<code&gt;'color:red;font-weight:bold';&gt;禁用'#\'" /wrong.gif' /&gt;";             }         }}

只需要在columns定义的时候将列的返回值更改为HTML即可。
名称列的颜色值变色也是同样的方法，这里为了方便，我就自定义了一个方法，在renderer里引入即可，如下代码：

1 2 3 4 5 6

//改变列颜色自定义renderner方法 function renderMotif(data, cell, record, rowIndex, columnIndex, store){     var value = record.get('name');     cell.style="background-color:"+value;     return data; }

列中引用：

1	{header:'名称',dataIndex:'name',width:80, renderer:renderMotif},

那上面的查询详细信息是什么呢？看下图：

弹出这个单元格里的详细信息，主要代码如下：

1 2 3 4 5 6 7 8 9 10 11

//自定义renderner方法 function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store){     var str="<input type="button" value="查询详细信息"&gt;         "这个单元格的值是："+value +"n"+         "这个单元格的配置是:{cellId:"+cellmeta.cellId+",id:"+cellmeta.id+",css:"+cellmeta.css+"}n"+         "这个单元格对应行的record是："+record +",一行的数据都在里面n"+         "这是第"+rowIndex+"行n"+         "这是第"+columnIndex +"列n"+         "这个表格对应的Ext.data.Store在这里:"+ store +",随便用吧。"+"")' /&gt;";     return str; }

列定义：

1	{header:'描述',dataIndex:'descn',width:112,renderer:renderDescn}

我们可以在渲染函数里得到多个参数，如下所示：
value：将要显示到单元格里的值；
cellmeta：单元格的相关属性，主要有id和CSS；
record：这行的数据对象，如果需要获取其他列的值，可以通过record.data["id"]的方式得到，这个属性很重要，我们经常会用到；
rowIndex：行号，这里的行号指的是当前页中所有记录的顺序；
columnIndex：当前列的列号；
store：构造表格时传递的ds。表格里的所有数据都可以通过store获得。

自动显示行号和复选框都是renderer的延伸。先来说自动显示行号，在列模型columns中加入RowNumber对象即可，如下代码：

1	new Ext.grid.RowNumberer(), //自动显示行号

同样，复选框还是要修改columns模型加入SelectionModel对象：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

//加入复选框组件，{checkOnly:true}会解决在操作中不慎选中了某一行就会变成选中一行的情况，只允许用户通过复选框执行选中     var sm = new Ext.selection.CheckboxModel({checkOnly:true});     //创建表格     var grid = new Ext.grid.GridPanel({         renderTo:'grid', //渲染位置         width:550,         height:250,         selModel:sm,         store:store, //转换后的数据         columns:columns, //显示列         stripeRows:true, //斑马线效果         //enableColumnMove: false, //禁止拖放列         //enableColumnResize: false, //禁止改变列宽度         loadMask:true //显示遮罩和提示功能,即加载Loading……         //forceFit:true //自动填满表格     });

注：{checkOnly:true}会解决在操作中不慎选中了某一行就会变成选中一行的情况，只允许用户通过复选框执行选中。
下面给出完整示例代码，代码中还说到了Ext.grid.GridView，大家注意看下。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81

<code&gt;html&gt; <code&gt;head&gt; <code&gt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; <code&gt;title&gt;Hello Extjs4.2<code&gt;title&gt; <code&gt;link <code&gt;href="../ExtJS4.2/resources/css/ext-all-neptune.css" rel="stylesheet"&gt; <code&gt;script src="../ExtJS4.2/ext-all.js"&gt;<code&gt;script&gt; <code&gt;script src="../ExtJS4.2/locale/ext-lang-zh_CN.js"&gt;<code&gt;script&gt; <code&gt;script type="text/javascript"&gt; //表格数据最起码有列、数据、转换原始数据这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';&gt;可用span&gt;img src=\'#\'" /right.gif' /&gt;";             } else {                 return "span style='color:red;font-weight:bold';&gt;禁用span&gt;img src=\'#\'" /wrong.gif' /&gt;";             }         }}       ];     //定义数据     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 //表格会自动延展每列的长度，使内容填满整个表格         }     }); }); <code&gt;script&gt; <code&gt;head&gt; <code&gt;body&gt; <code&gt;h1&gt;我的ExtJS4.2学习之路<code&gt;h1&gt; <code&gt;hr /&gt; 作者：束洋洋 开始日期：2013年11月10日 22:34:26 <code&gt;h2&gt;深入浅出ExtJS之表格视图--Ext.grid.GridView<code&gt;h2&gt; <code&gt;div id="grid"&gt;<code&gt;div&gt; <code&gt;body&gt; <code&gt;html&gt;

思考者日记网