现在的位置: 首页 > 综合 > 正文

Ext.ListView、Ext.view.View 数据视图

2013年12月01日 ⁄ 综合 ⁄ 共 4875字 ⁄ 字号 小 中 大 ⁄ 评论关闭

本篇介绍两个用来展示数据的容器控件，分别是Ext.ListView和Ext.view.View。Ext.ListView就是大名鼎鼎的Ext GridPanel的前身，不过现在的Ext4已经将它整合到GridPanel一起了，做一些简单的表格数据展示还是可以用到的。而Ext.view.View则提供了通过模板自定义展示数据的方式，数据的展示形式不限于表格，可表现为灵活的方式，同时Ext为其提供了基本的排序分页、项选择、事件等支持。

如果不做特殊说明，本系列文章都以mvc的服务端返回json格式的数据作为数据源的方式。

一、Ext.ListView

下面我们看看一个基本的表格数据展示实例：

[html]

?
1
2
3
<h1>ListView</h1>
<div
id="div1"
class="content"></div>
<span
id="span1"></span>

[Js]

?
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
Ext.onReady(function
() {
    var
store = new
Ext.data.JsonStore({
        fields: [
        { name:
'IntData', type:
'int'
},
        { name:
'StringData', type:
'string'
},
        { name:
'TimeData', type:
'date'
}
       ],
        proxy: {
            type:
'ajax',
            url:
'ListView1Json',
            reader: {
                type:
'json',
                root:
'rows'
            }
        },
        sortInfo: { field:
'IntData', direction:
'DESC'
}
    });
    store.load();
  
    var
listView = Ext.create('Ext.ListView', {
        renderTo:
"div1",
        store: store,
        multiSelect:
true,
        emptyText:
'无数据',
        reserveScrollOffset:
true,
        hideHeaders:
false,       
//是否隐藏标题
        columns: [{
            header:
"IntData",
            dataIndex:
'IntData'
        }, {
            header:
"StringData",
            dataIndex:
'StringData'
        }, {
            header:
"TimeData",
            dataIndex:
'TimeData',
            align:
'right',
            xtype:
'datecolumn',
            format:
'm-d h:i a'
        }]
    });
  
    //当选择行改变时，输出被选行
    listView.on('selectionchange',
function
(view, selectNodes) {
        var
msg = "";
        for
(var
i = 0; i < selectNodes.length; i++) {
            var
index = 1 + selectNodes[i].index;
            if
(msg == "") {
                msg = index;
            }
            else
{
                msg +=
","
+ index;
            }
        }
        if
(msg == "") Ext.get("span1").update('当前没有选择任何数据。');
        else
Ext.get("span1").update('当前选择了第'
+ msg + '行数据。');
    });
});

服务端模拟的数据源，以及通过MVC的jsonresult返回数据的代码：

[C# Mvc]

?
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
//控制层
public
JsonResult ListView1Json()
{
    var json =
new
    {
        rows = BasicData.Table.Take(8).Select(x =>
new
        {
            IntData = x.IntData,
            StringData = x.StringData,
            TimeData = x.TimeData.ToShortDateString()
        })
    };
    return
Json(json, JsonRequestBehavior.AllowGet);
}
  
//模拟数据
public
class
BasicData
{
    static
List<BasicData> table;
    static
public
List<BasicData> Table
    {
        get
        {
            if
(table == null)
            {
                table =
new
List<BasicData>();
                for
(int
i = 0; i < 1000; i++)
                {
                    var obj =
new
BasicData()
                    {
                        IntData = i + 1,
                        StringData =
"测试数据"
+ (i + 1),
                        TimeData = DateTime.Today.AddDays(i)
                    };
                    table.Add(obj);
                }
            }
            return
table;
        }
    }
    public
int
IntData { get;
set; }
    public
string
StringData { get;
set; }
    public
DateTime TimeData { get;
set; }
}

来看看效果，数据已经正确加载，当我们选择行时，可以看到提示当前选择了哪些行:

再看看通过火狐调试捕获到的服务端json数据：

二、Ext.view.View

先看看实现代码：

[html]

?
1
2
3
<h1>Ext.view.View</h1>
<div
class="content"
id="div1"></div>
<span
id="span1"></span>

[Css]

?
1
2
3
4
5
6
7
8
9
10
11
#view1
.data
{
    background-color:#fff;
}
#view1
tr.hover {
    background-color:
#ddd;
}
  
#view1
.x-item-selected {
    background-color:Yellow
!important;
}

[Js]

?
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
Ext.Loader.setConfig({ enabled:
true
});
Ext.Loader.setPath('Ext.ux.DataView',
'/ExtJs/ux/DataView');
  
Ext.onReady(function
() {
    //创建store
    var
store = Ext.create('Ext.data.Store', {
        fields: ['IntData',
'StringData',
'TimeData'],
        proxy: {
            type:
'ajax',
            url:
'DataView1Json',
            reader: {
                type:
'json',
                root:
'rows'
            }
        }
    });
    store.load();
  
    //定义模板
    var
tpl = new
Ext.XTemplate(
        '<table cellpadding=0 cellspacing=0 border=1 width=450px>',
        '<tr><td colspan=3 align=center><b><font color=red>Ext.view.View取自服务端的数据表</font></b></td></tr>',
        '<tr><td style="width:20%"><b>编号</b></td><td  style="width:50%"><b>消息</b></td><td
style="width:30%"><b>日期</b></td>',
        '<tpl for=".">',
            '<tr class="data"><td class="x-editable">{IntData}</td><td>{StringData}</td><td>{TimeData}</td></tr>',
        '</tpl>',
        '</table>'
    );
  
    //定义Ext.view.View控件
    var
view = Ext.create('Ext.view.View', {
        renderTo:
"div1",
        store: store,
        tpl: tpl,
        autoHeight:
true,
        multiSelect:
true,
        //height: 310,
        trackOver:
true,
        id:
'view1',
        overItemCls:
'hover',
        itemSelector:
'tr.data',
        emptyText:
'没有数据',
        plugins: [
                Ext.create('Ext.ux.DataView.DragSelector',
{}),
                Ext.create('Ext.ux.DataView.LabelEditor'
返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）