ExtJS4.2学习(五)表格渲染与复选框
前几章做的例子,你有没有发现太单调啦?呵呵,相信聪明的你一定知道,光显示文字,那这功能太弱爆了吧,现在我们来看下ExtJs给我们带来的表渲染和复选框等功能。 有的人问我了,为什么你们的默认表样式和我做的效果图不一样呢,呵呵,那是因为我引入了ExtJS
前几章做的例子,你有没有发现太单调啦?呵呵,相信聪明的你一定知道,光显示文字,那这功能太弱爆了吧,现在我们来看下ExtJs给我们带来的表格渲染和复选框等功能。
有的人问我了,为什么你们的默认表格样式和我做的效果图不一样呢,呵呵,那是因为我引入了ExtJS4.2的其他样式,并非默认的样式,换样式很简单,只需要更改Link引入的文件就可以很轻松的换各种样式,哇~是不是很给力啊,你敢信?
好了,不扯远了,下面看这章要做的效果图:
怎么样,是不是很丰富?
先来说文字的颜色怎么变吧,详细你学过HTML+CSS一定知道怎么变,同理,在EXTJS里只需要用到renderer即可轻松做成HTML的效果,看下面的代码:
1 2 3 4 5 6 7 |
|
只需要在columns定义的时候将列的返回值更改为HTML即可。
名称列的颜色值变色也是同样的方法,这里为了方便,我就自定义了一个方法,在renderer里引入即可,如下代码:
1 2 3 4 5 6 |
|
列中引用:
1 |
|
那上面的查询详细信息是什么呢?看下图:
弹出这个单元格里的详细信息,主要代码如下:
1 2 3 4 5 6 7 8 9 10 11 |
|
列定义:
1 |
|
我们可以在渲染函数里得到多个参数,如下所示:
value:将要显示到单元格里的值;
cellmeta:单元格的相关属性,主要有id和CSS;
record:这行的数据对象,如果需要获取其他列的值,可以通过record.data["id"]的方式得到,这个属性很重要,我们经常会用到;
rowIndex:行号,这里的行号指的是当前页中所有记录的顺序;
columnIndex:当前列的列号;
store:构造表格时传递的ds。表格里的所有数据都可以通过store获得。
自动显示行号和复选框都是renderer的延伸。先来说自动显示行号,在列模型columns中加入RowNumber对象即可,如下代码:
1 |
|
同样,复选框还是要修改columns模型加入SelectionModel对象:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
注:{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 |
|
思考者日记网
上一篇: 真正程序员(搞笑版)_PHP