您的位置:首页 > Web前端 > JavaScript

ExtJs 读取 Xml 数据

2011-03-31 14:33 281 查看
ExtJs 中使用 GridPanel 读取 Xml 文件时,如何配置 Store 的 URL属性,以及 Xml 文件的存放位置(asp.net版)。

/*
* 官方示例代码
*/
Ext.onReady(function(){
// create the Data Store
var store = new Ext.data.Store({
/* load using HTTP,注意这里的URL属性
在通过IIS或Tomcat运行程序时,Xml文件应保证与HTML页面文件在同一文件夹内
或者确实采用远程访问方式,本地没有Xml文件,URL属性为:'http://extjs.com/deploy/dev/examples/grid/sheldon.xml'
*/
url: 'sheldon.xml',
// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have an "Item" tag
record: 'Item',
id: 'ASIN',
totalRecords: '@total'
}, [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'Author', mapping: 'ItemAttributes > Author'},
'Title', 'Manufacturer', 'ProductGroup'
])
});
// create the grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "Author", width: 120, dataIndex: 'Author', sortable: true},
{header: "Title", width: 180, dataIndex: 'Title', sortable: true},
{header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
{header: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
],
renderTo:'example-grid',
width:540,
height:200
});
store.load();
});

/*
* 个人代码
* 将grid显示在TabPanel中
*/
Ext.onReady(function westPanel() {
var store = new Ext.data.Store({
url: 'ExcellentStaffList.xml',
reader: new Ext.data.XmlReader({
record: 'StaffInfo',
id: 'ID',
totalRecords: 'Results'
}, [
'Name','Position'
])
});
store.load();
var wpanel = new Ext.TabPanel({
renderTo: 'wPanel',
activeTab: 0,
width: 200,
items: [{
title: '优秀员工',
xtype: 'grid',
frame: true,
autoHeight: true,
store: store,
autoExparidColumn: 'Name',
columns: [
{ header: "姓名", dataIndex: 'Name' },
{ header: "职位", dataIndex: 'Position' }
]
}, {
title: '部门奖励',
html: '<img src="../Image/badge.jpg" height=100>'
}]
});
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: