ExtJS4.2学习(五)表格渲染与复选框
Jun 07, 2016 pm 03:07 PM前几章做的例子,你有没有发现太单调啦?呵呵,相信聪明的你一定知道,光显示文字,那这功能太弱爆了吧,现在我们来看下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 |
|
思考者日记网

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Langkah-langkah melaraskan format gambar yang disisipkan dalam jadual PPT

Cara membuat jadual untuk ramalan jualan

Bagaimana untuk menetapkan nilai WPS untuk menukar warna secara automatik mengikut syarat_Langkah untuk menetapkan nilai jadual WPS untuk menukar warna secara automatik mengikut keadaan

Bagaimana untuk memasukkan penomboran automatik atau nombor siri ke dalam jadual Word

Apakah petua untuk orang baru membuat borang?

Adakah anda tahu cara menjumlahkan jadual Word?

Bagaimana untuk memaparkan pandangan atas ortogon dalam Kujiale_Tutorial pada memaparkan paparan atas ortogon dalam Kujiale

Adakah anda tahu bagaimana untuk menetapkan warna jadual dokumen WPS?
