ExtJs4 笔记（11） Ext.ListView、Ext.view.View 数据视图
本篇介绍两个用来展示数据的容器控件，分别是Ext.ListView和Ext.view.View。Ext.ListView就是大名鼎鼎的Ext GridPanel的前身，不过现在的Ext4已经将它整合到GridPanel一起了，做一些简单的表格数据展示还是可以用到的。而Ext.view.View则提供了通过模板自定义展示数据的方式，数据的展示形式不限于表格，可表现为灵活的方式，同时Ext为其提供了基本的排序分页、项选择、事件等支持。
如果不做特殊说明，本系列文章都以mvc的服务端返回json格式的数据作为数据源的方式。
一、Ext.ListView
下面我们看看一个基本的表格数据展示实例：
[html]
<h1>ListView</h1>
<div id="div1" class="content"></div>
<span id="span1"></span>
[Js]
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]
//控制层
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]
<h1>Ext.view.View</h1>
<div class="content" id="div1"></div>
<span id="span1"></span>
[Css]
#view1 .data
{
background-color:#fff;
}
#view1 tr.hover {
background-color: #ddd;
}
#view1 .x-item-selected {
background-color:Yellow !important;
}
[Js]
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]
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]
plugins: [
Ext.create('Ext.ux.DataView.DragSelector', {}),
Ext.create('Ext.ux.DataView.LabelEditor', { dataIndex: 'IntData' })
],
这里分别引入了两个扩展支持，前者描述了数据项可以通过拖动鼠标选择多个item项，查看效果：
第二个扩展支持了对item数据项记录集的单元格数据的编辑功能，这里表明了dataIndex为'IntData'的单元格可以被编辑。注意：在模板对应的位置要引入 class="x-editable"的样式来支持。下面看看效果：
