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

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

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

好了，不扯远了，下面看这章要做的效果图：

怎么样，是不是很丰富？

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

只需要在columns定义的时候将列的返回值更改为HTML即可。

名称列的颜色值变色也是同样的方法，这里为了方便，我就自定义了一个方法，在renderer里引入即可，如下代码：

列中引用：

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

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

列定义：

我们可以在渲染函数里得到多个参数，如下所示：

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

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

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

注：{checkOnly:true}会解决在操作中不慎选中了某一行就会变成选中一行的情况，只允许用户通过复选框执行选中。

下面给出完整示例代码，代码中还说到了Ext.grid.GridView，大家注意看下。