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"的样式来支持。下面看看效果:
ExtJs4 笔记(11) Ext.ListView、Ext.view.View 数据视图的更多相关文章
- ExtJs4 笔记(4) Ext.XTemplate 模板
ExtJs4 笔记(4) Ext.XTemplate 模板 摘自:http://www.cnblogs.com/lipan/ 本篇将涉及到ExtJs中一个重要的概念,模板.话说Razor很神奇,但是我 ...
- [转]ExtJs4 笔记(13) Ext.menu.Menu 菜单、Ext.draw.Component 绘图、Ext.resizer.Resizer 大小变更
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...
- [转载]ExtJs4 笔记(12) Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...
- ExtJs4 笔记(13) Ext.menu.Menu 菜单、Ext.draw.Component 绘图、Ext.resizer.Resizer 大小变更
本篇讲解菜单.绘图.还有大小变更控件.菜单控件可以附加到各种其他控件中,比如按钮.工具栏等,甚至可以直接通过通过右键打开(模拟右键菜单):ext对绘图的支持可以让我们通过js来绘图:大小变更控件可以让 ...
- ExtJs4 笔记(12) Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏
本篇讲解三个工具栏控件.其中Ext.toolbar.Toolbar可以用来放置一些工具类操控按钮和菜单,Ext.toolbar.Paging专门用来控制数据集的分页展示,Ext.ux.statusba ...
- [转载]ExtJs4 笔记(10) Ext.tab.Panel 选项卡
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...
- [转载]ExtJs4 笔记(7) Ext.tip.ToolTip 提示
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...
- [转载]ExtJs4 笔记(9) Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...
- [转载]ExtJs4 笔记(8) Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...
- [转载]ExtJs4 笔记(5) Ext.Button 按钮
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...
随机推荐
- 求知成瘾+逻辑成瘾+博识的无知,你中枪没?我感觉中枪了 - 外野 - Stage1st - Powered by Discuz!
求知成瘾+逻辑成瘾+博识的无知,你中枪没?我感觉中枪了 - 外野 - Stage1st - Powered by Discuz! 求知成瘾 求知欲似乎是人们的本能,尤其「好学」这个词被定义成天生的褒义 ...
- 通过sharedpreference两个程序共享数据
一.整体工程图 二.SharePreferenceWriteActivity.java package org.ourunix.android.sharepreferencewrite; i ...
- 幻世(OurDream)2D图形引擎使用教程11——播放媒体文件(1)
声明:本教程版权归Lizcst Software Lab所有,欢迎转载,但是转载必须保留本段声明文字,并注明文章来源:http://blog.csdn.net/kflizcst 谢谢合作! 播放媒体是 ...
- Web端的Tab控件在切换Tab时Load数据出错的处理
我们在应用Web端的Tab控件时,不管是Jquery easyui的还是Ext的Tab控件都会遇到一个问题,在Tab1正在加载数据的时候我们切换到Tab2,再切换回来,Load数据的控件就会出错,出错 ...
- 我的Python成长之路---第一天---Python基础(2)---2015年12月26日(雾霾)
三.数据类型 Python基本类型(能够直接处理的数据类型有以下几种)主要有5种 1.整数(int) Python可以处理任意大小的整数,当然包括负整数,在程序中的表示方法和数学上的写法一模一样,例如 ...
- mysql备份数据库几种方法
方法一 cmd 到mysql bin文件夹下用 例如以下命令 mysqldump --opt -h192.168.0.156 -uusername -ppassword --skip-lock-tab ...
- 用 PS 复制权限
用 PS 复制权限 我们要把源计算机上的文件权限复制到目的计算机上. get-acl .\s.txt | Export-Clixml sddl.xml 把 s.txt 文件的权限保存到 sddl.xm ...
- 简单的方式实现javascript 小数取整
JS: function truncateNumber(n){ return n|0; } 測试: console.log(truncateNumber(12.345)); 浏览器打印出12
- Android ListView 常见问题与使用总结
一.机制 ListView机制 - 先运行getCount.然后运行getView. 假设getCount返回0,不运行getView Gallery convertView不会复用.每次都返回NUL ...
- iOS 编程之 使用 Xcode6配置.pch文件
刚上手 Xcode6 的人,总会发现之前在 6 之前常常会在“利用名-Prefix.pch”这个文件中来配置我们全局要用到的头文件,但是 xcode6 没有了,人家说,这类东西有时候也会出现1些稀里糊 ...