| |
| 简单试用ExtJs2.0的XML Grid |
| |
发布者： 发布时间：2007-11-26 |
|
|
ExtJS2.0的开发版本已经发布一段时间了，闲暇时间想将过去我用1.1.1版实现的Tree迁移到新版本，发现问题还真不少，虽然官方有个迁移文档说明，砍除的、重构的一大堆差异，真是懒得修理。2.0在组件和布局上改进了不少，表格组件在这方面也有很大的改进，除了提供更人性化的排序、显示/隐藏列和列拖动外，在Cell部分也做了很大改进，值得一试。  Download ext-2.0-rc1.zip
JSP代码段 <%@ page contentType="text/html; charset=GBK" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>只读显示表格的例子(数据是XML)</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
</head>
<body>
<script>
Ext.onReady(function(){ //创建一个Ext存储对象
var store = new Ext.data.Store({
// 使用一个URL获取数据源
url: 'extjs2-grid1.xml', //映射关系
reader: new Ext.data.XmlReader({
record: 'Item',
id: 'ASIN',
totalRecords:'@total'
}, [
{name: 'Author', mapping: 'ItemAttributes > Author'},
'Title', 'Manufacturer', 'ProductGroup'
])
}); //创建一个表格对象
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "作者", width: 120, dataIndex: 'Author', sortable: true},
{header: "标题", width: 180, dataIndex: 'Title', sortable: true},
{header: "出版社", width: 115, dataIndex: 'Manufacturer', sortable: true},
{header: "分类", width: 100, dataIndex: 'ProductGroup', sortable: true}
],
renderTo:'example-grid',
width:540,
height:200
});
store.load();
}); </script>
<br>
<h3>只读显示表格的例子(数据是XML)</h3>
<br><br>
<div id="example-grid"></div>
</body>
</html> |
extjs2-grid1.xml文件格式： <?xml version="1.0" encoding="GBK"?>
<GridResponse>
<Items>
<Item>
<ASIN>0446613653</ASIN>
<ItemAttributes>
<Author>霍斯特曼</Author>
<Manufacturer>机械工业出版</Manufacturer>
<ProductGroup>进阶</ProductGroup>
<Title>JAVA2核心技术卷I</Title>
</ItemAttributes>
</Item>
<Item>
<ASIN>0446613657</ASIN>
<ItemAttributes>
<Author>埃克尔</Author>
<Manufacturer>机械工业出版社</Manufacturer>
<ProductGroup>基础</ProductGroup>
<Title>Java编程思想（第4版）</Title>
</ItemAttributes>
</Item>
</Items>
</GridResponse> |
运行结果： 
附件:TAG:AjaxExtJs
|
| (转载文章请保留出处：北天JAVA技术网(www.java114.com)) |
| |
| 更多精彩文章: |
| 系统构建高性能J2EE应用的五种核心策略 |
| 大型项目中的XP |
| OO以后是什么 |
| 用OOA/OOD方法描述企业经营模型 |
| 项目规划迭代 |
| 揭开极端编程的神秘面纱：重访XP精华，第1部分 |
| |
| 最近评论: |
|
|
| 鍥炲 |
|
|
|
| 那天的情景！ |
| Maple Story mesos,MapleStory mesos,ms mesos,mesos,SilkRoad Gold,
max(3676) |
|
|
| 如果真的有来生！ |
| 四川旅游,九寨沟旅游,稻城亚丁旅游,四姑娘山旅游,海螺沟旅游,西藏旅游,
max(9014) |
|
|
| 左边的风景！ |
| wow gold,wow power leveling.wow power leveling,wow power leveling,
max(8362) |
|
|
| 轻轻走过你的窗前！ |
| world of warcraft gold,cheap world of warcraft gold,warcraft gold,world of warcraft gold,cheap world of warcraft gold,warcraft gold, max(7555) |
|
|
| 不在的哪天！ |
| final fantasy xi gil,final fantasy xi gil,final fantasy xi gil,final fantasy xi gil,
max(891) |
|
|
| 轻轻走过你的窗前！ |
| world of warcraft gold,cheap world of warcraft gold,warcraft gold,world of warcraft gold,cheap world of warcraft gold,warcraft gold max(5737) |
|
|
| 快乐情人节！ |
| wow gold,wow gold,wow gold,wow gold,wow gold,wow gold,wow gold buy wow gold for cheap.
max(2303) |
|
|
| 快乐情人节！ |
| wow gold,wow gold,wow gold,wow gold,wow gold,wow gold,wow gold buy wow gold for cheap.
max(6) |
|
|
| 昨夜的狂想曲！ |
| wow gold,WoW Gold,world of warcraft gold,WoW Gold, max(9138) |
|
|
| |
| 免责声明:该文章由网友发表,如果对您造成侵权,请联系站长。 |
|
