前几章做的例子，你有没有发现太单调啦？呵呵，相信聪明的你一定知道，光显示文字，那这功能太弱爆了吧，现在我们来看下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 可用/right.gif' />;
            } else {
                return 禁用'#\' /wrong.gif' />;
            }
        }}
只需要在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=
        这个单元格的值是：+value +n+
        这个单元格的配置是:{cellid:+cellmeta.cellid+,id:+cellmeta.id+,css:+cellmeta.css+}n+
        这个单元格对应行的record是：+record +,一行的数据都在里面n+
        这是第+rowindex+行n+
        这是第+columnindex +列n+
        这个表格对应的ext.data.store在这里:+ store +,随便用吧。+)' />;
    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
html>
head>
meta http-equiv=content-type content=text/html; charset=utf-8>
title>hello extjs4.2title>
link href=../extjs4.2/resources/css/ext-all-neptune.css rel=stylesheet>
script src=../extjs4.2/ext-all.js>script>
script src=../extjs4.2/locale/ext-lang-zh_cn.js>script>
script type=text/javascript>
//表格数据最起码有列、数据、转换原始数据这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';>可用span>img src=\'#\' /right.gif' />;
            } else {
                return span style='color:red;font-weight:bold';>禁用span>img src=\'#\' /wrong.gif' />;
            }
        }}
      ];
    //定义数据
    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 //表格会自动延展每列的长度，使内容填满整个表格
        }
    });
});
script>
head>
body>
h1>我的extjs4.2学习之路h1>
hr />
作者：束洋洋
开始日期：2013年11月10日 22:34:26
h2>深入浅出extjs之表格视图--ext.grid.gridviewh2>
div id=grid>div>
body>
html>
思考者日记网