Ext2.0 学习系列 ------- Ext Grid (二)
Ext2.0 学习系列(转) ------- Ext Grid (一)中已经介绍了静态的Grid如何显示,本章要简单的讲述一下,如何使用Struts和JSON,在Grid上显示数据。
JSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧。JSON 是JavaScript 原生格式,这意味着在JavaScript 中处理JSON 数据不需要任何特殊的API 或工具包。
JSON的规则很简单: 对象是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’ 对”之间使用“,”(逗号)分隔。具体细节参考http://www.json.org/json-zh.html。
最近正好在学习Struts2.0,在此记录一下Struts2中使用JSON的一种方法。
1. 首先当然是搭建好你的Struts2的环境
2. 到http://json-lib.sourceforge.net下载需要依赖的jar包,json-lib-2.1-jdk15.jar。json还依赖了以下的第三方包:
commons-beanutils.jar, commons-collections-3.1.jar, commons-lang-2.3.jar, ezmorph-1.0.4.jar
3. 下载JSON插件(jsonplugin-0.19.jar),地址:http://code.google.com/p/jsonplugin/downloads/list,这个很好用!呵呵
4. 创建Action如下:Java代码
public class JsonAction extends ActionSupport {
List<Person> pList = new ArrayList<Person>();
public String execute() {
Person p1 = new Person();
Person p2 = new Person();
p1.setName("shenchong");
p1.setSex("男");
p2.setName("sophia");
p2.setSex("女");
pList.add(p1);
pList.add(p2);
return SUCCESS;
}
@JSON(name = "Person")
public List<Person> getPList() {
return pList;
}
}
public class JsonAction extends ActionSupport {
List<Person> pList = new ArrayList<Person>();
public String execute() {
Person p1 = new Person();
Person p2 = new Person();
p1.setName("shenchong");
p1.setSex("男");
p2.setName("sophia");
p2.setSex("女");
pList.add(p1);
pList.add(p2);
return SUCCESS;
}
@JSON(name = "Person")
public List<Person> getPList() {
return pList;
}
}
其中,Person类是一个最简单的POJO,有两个属性name和sex。
5. 配置ActionXml代码
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="com.demo" extends="json-default">
<action name="Json" class="com.demo.JsonAction">
<result type="json"/>
</action>
<!-- Add your actions here -->
</package>
</struts>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="com.demo" extends="json-default">
<action name="Json" class="com.demo.JsonAction">
<result type="json"/>
</action>
<!-- Add your actions here -->
</package>
</struts>
上面配置文件的“package”元素和以往不同的是,它扩展了“json- default”而不是“struts-default”。“json-default”是在jsonplugin-0.19.jar包里的struts -plugin.xml中定义的。该文件同时定义了“json”的结果类型,有兴趣的朋友可以打开此文件看看。
如果你现在就访问http://localhost:8080/XXXX/Json.action,会出现出现下载文件对话框,原因是JSON插件将HTTP响应(Response)的MIME类型设为 “application/json”。把文件下载下来,用记事本打开,内容如下:
{"Person":[{"name":"shenchong","sex":"男"},{"name":"sophia","sex":"女"}]}
6. EXT的js这样写就可以了
Java代码
Ext.onReady(function(){
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url:'Json.action',
method: 'GET'
}),
reader: new Ext.data.JsonReader({
root: 'Users',
id: 'id'
},[{name: 'name', mapping: 'name'},
{name: 'sex', mapping: 'sex'}]
)
});
var column = new Ext.grid.ColumnModel([
{header: '姓名', dataIndex: 'name', width: 100},
{header: '性别', dataIndex: 'sex', width: 50}
]);
column.defaultSortable = true;
});
Ext.onReady(function(){
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url:'Json.action',
method: 'GET'
}),
reader: new Ext.data.JsonReader({
root: 'Users',
id: 'id'
},[{name: 'name', mapping: 'name'},
{name: 'sex', mapping: 'sex'}]
)
});
var column = new Ext.grid.ColumnModel([
{header: '姓名', dataIndex: 'name', width: 100},
{header: '性别', dataIndex: 'sex', width: 50}
]);
column.defaultSortable = true;
});
后面就是创建一个Grid显示了。
Java代码
var grid = new Ext.grid.GridPanel({
el: 'listUser-grid',
width:700,
height:500,
title:'用户表',
store: store,
cm: column,
trackMouseOver: false,
sm: new Ext.grid.RowSelectionModel(),
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: ' 本页显示从{0} 到 {1} 条,共 {2} 条数据',
emptyMsg: "没有可以显示的数据"
})
});
grid.render();
store.load();
var grid = new Ext.grid.GridPanel({
el: 'listUser-grid',
width:700,
height:500,
title:'用户表',
store: store,
cm: column,
trackMouseOver: false,
sm: new Ext.grid.RowSelectionModel(),
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: ' 本页显示从{0} 到 {1} 条,共 {2} 条数据',
emptyMsg: "没有可以显示的数据"
})
});
grid.render();
store.load();
jsp页面上加入一个div就可以了,id一定要是listUser-grid
分享到:
相关推荐
我的资源不需要积分 EXT2.0 GRID 示例 很实用
ext2.0 grid 分页实例(php)
1.3. 看看ext-2.0的文档 1.4. 为什么有的例子必须放在服务器上才能看到效果? 1.5. 为什么自己按照例子写的代码,显示出来总找不到图片 1.6. 我们还需要什么? 1.7. 入门之前,都看helloworld。 1.7.1. 直接使用下载...
最近空闲时间在学习Ext2.0框架,只有一个字的感叹“强”,我从未想到JS代码能够写出这么绚丽的Web页面出来,以前看到YUI,惊若天人,如今看到EXT2.0的东西,更是感觉震撼。
唉,当然他们说英文不好懂,于是,我就看完了Ext官方网站的介绍,然后把该网站介绍--Ext2.0开发指南完整翻写成了简体中文,并且使用Ext2.2调试出来,因为--该官方网站给出的是Ext 2.0版本,有的代码跑不出来,比如...
Ext2.0框架的Grid的使用 开放前台 美观页面
ext2.0的源码 和一些example,如:grid的写法,grid的拖拽,树的拖拽等等
通过ext2.0.rar可以创建相当完美的Grid.该Grid支持本地、远程排序,动态调整列宽以及列的顺序等。
本示例实现Ext2.0的 Grid列锁定,用到了扩展类,代码为C# MVC。下载代码便可以运行查看效果,可以根据需要配置你自己实际的需要。
Ext+2.0+Grid的增删改查.txtExt+2.0+Grid的增删改查.txtExt+2.0+Grid的增删改查.txtExt+2.0+Grid的增删改查.txtExt+2.0+Grid的增删改查.txtExt+2.0+Grid的增删改查.txt
是一个Ext的插件,用于对Grid列进行扩展的工具,想增加列就增加,想减少列就减少,机动性非常的强,非常实用。
再加上可编辑grid,添加新行,删除一或多行,提示脏数据,推拽改变grid大小,grid之间推拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...
本文实例讲述了JSP+EXt2.0实现分页的方法。分享给大家供大家参考。具体如下: JavaScript代码: Ext.onReady(function(){ var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel([ ...
ext2.2添加了很多强大的功能! Ext2.2 的功能比2.0又增进了许多,grid之间的拖动,单选按钮也有了,弹出窗口还多了地图缩放,多选项的移动。
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
根据网络上已有的导出代码,替换ext2.0中的函数和属性为ext5.0版本。 无选择项默认导出全表。 未考虑grid分页的情况。 默认设置导出文件名为grid中name属性+当天年月日。 没有研究出data uri协议导出excel文件时动态...
ext5.0 根据网络上的导出文件替换ext2.0中的函数和属性。 无选择项默认导出全表。 未考虑grid分页的情况。 默认设置导出文件名为grid中name属性+当天年月日。 没有研究出data uri协议导出excel文件时动态修改文件名...
7.3. 第二!代理proxy和目标target 7.4. yui自远方来,不亦乐乎 7.4.1. Basic,基础 7.4.2. Handles,把手 7.4.3. On Top,总在上边 7.4.4. Proxy,代理 7.4.5. Groups,组 7.4.6. Grid,网格 7.4.7. Circle,圆形 ...
我从未想到JS代码 看到YUI,惊若天人,如今看到EXT2.0的东西,更是感觉震撼