本篇介绍两个用来展示数据的容器控件，分别是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
|
#view
1
.data
{
background-color
:
#fff
;
}
#view
1
tr.hover {
background-color
:
#ddd
;
}
#view
1
.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'
, { dataIndex:
'IntData'
})
],
listeners: {
selectionchange:
function
(dataView, 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 +
'行数据。'
);
}
}
});
});
|
[C# Mvc]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
public
JsonResult DataView1Json()
{
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);
}
|
1.要注意的地方：
对于数据item项，我们在其html 设置 class="data",那么我们在配置项中设置：itemSelector: 'tr.data'表明了这个CSS选择器选中的元素是一个item数据项。
当item被选择时，我们需要定义一个.x-item-selected 的样式，这样才可以在展示界面表现出item项被选中时的样式。
下面我们看看效果：
2.对Ext.view.View的扩展
注意到配置项的如下代码：
[Js]|
1
2
3
4
|
plugins: [
Ext.create(
'Ext.ux.DataView.DragSelector'
, {}),
Ext.create(
'Ext.ux.DataView.LabelEditor'
, { dataIndex:
'IntData'
})
],
|
这里分别引入了两个扩展支持，前者描述了数据项可以通过拖动鼠标选择多个item项，查看效果：
第二个扩展支持了对item数据项记录集的单元格数据的编辑功能，这里表明了dataIndex为'IntData'的单元格可以被编辑。注意：在模板对应的位置要引入 class="x-editable"的样式来支持。下面看看效果：
498
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
