Yui-ext之grid从xml取数据
test.xml：
<?xml version="1.0" encoding="GBK"?>
<students>
<student>
<id>1</id>
<name>王世元</name>
<address>江西</address>
<sex>男</sex>
<phone>
</phone>
</student>
<student>
<id>2</id>
<name>周广</name>
<address>吉林</address>
<sex>男</sex>
<phone>
</phone>
</student>
<student>
<id>3</id>
<name>刘玉玲</name>
<address>吉林</address>
<sex>女</sex>
<phone>
</phone>
</student>
<student>
<id>4</id>
<name>孙明哲</name>
<address>吉林</address>
<sex>男</sex>
<phone>
</phone>
</student>
</students>
xml-grid.js：
Ext.onReady(function(){
//创建数据存储
var ds = new Ext.data.Store({
//用http装载数据
proxy: new Ext.data.HttpProxy({url: 'test.xml'}),
// 读取xml的reader
reader: new Ext.data.XmlReader({
//记录的root节点
record: 'student',
id: 'id',
totalRecords: '@total'
}, [
//设置字段和节点对应关系，mapping用于与字段不同名的节点
//phone > mobile是指phone下面的mobile子节点
{name: 'name', mapping: 'name'},
'address', 'sex',
{name: 'phone', mapping: 'phone > mobile'}
])
});
//创建列模型
var cm = new Ext.grid.ColumnModel([
{header: "姓名", width: 120, dataIndex: 'name'},
{header: "地址", width: 180, dataIndex: 'address'},
{header: "性别", width: 115, dataIndex: 'sex'},
{header: "电话", width: 100, dataIndex: 'phone'}
]);
cm.defaultSortable = true;
// 创建grid
var grid = new Ext.grid.Grid('example-grid', {
ds: ds,
cm: cm
});
//渲染grid
grid.render();
ds.load();
});
xml-grid.html：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>XML Grid示例</title>
<link rel="stylesheet" type="text/css" href="ext-all.css" />
<!—加入需要的js库-->
<script type="text/javascript" src="yui-utilities.js"></script>
<script type="text/javascript" src="ext-yui-adapter.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="xml-grid.js"></script>
<link rel="stylesheet" type="text/css" href="grid-examples.css" />
<!—加入需要的js库完毕 -->
<!—示例样式表 -->
<link rel="stylesheet" type="text/css" href="examples.css" />
</head>
<body>
<script type="text/javascript" src="examples.js"></script><!-- EXAMPLES -->
<h1>XML Grid 示例</h1>
<!—放置grid的div,id为"example-grid"，与js中相对应-->
<div id="example-grid" class="x-grid-mso" style="border: 1px solid #c3daf9; overflow: hidden; width:520px;"></div>
</body>
</html>
