ExtJS4.2学习(五)表格渲染与复选框
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了ExtJS4.2学习(五)表格渲染与复选框,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含5714字,纯文字阅读大概需要9分钟。
内容图文
前几章做的例子,你有没有发现太单调啦?呵呵,相信聪明的你一定知道,光显示文字,那这功能太弱爆了吧,现在我们来看下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 |
|
思考者日记网
内容总结
以上是互联网集市为您收集整理的ExtJS4.2学习(五)表格渲染与复选框全部内容,希望文章能够帮你解决ExtJS4.2学习(五)表格渲染与复选框所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。