Ext4 TreeGrid使用xml作为数据源示例
TreeGrid要使用XML作为数据源，有2种方法。
第一种：首先用Ext.ajax请求xml文件，然后自己写解析方法，通过Ext.data.NodeInterface动态向treestore中添加嵌套数据，最后在再生成treegrid对象。
第二种：参考xml-tree.html这个示例，将treegrid的节点动态加载，不过既然通过动态页生成数据，还不如直接用动态页处理xml文件成需要的json数据来的简单。
下面为第一种方法的源代码，效果如下
test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ext4 TreeGrid使用xml作为数据源示例</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css">
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="xml-treegrid.js"></script>
<style type="text/css">
.task {
background-image: url(../shared/icons/fam/cog.gif) !important;
}
.task-folder {
background-image: url(../shared/icons/fam/folder_go.gif) !important;
}
</style>
</head>
<body>
<div id="treegrid-example-use-xml"></div>
</body>
</html>
xml-treegrid.js
function createTreeGrid(store) {
var tree = Ext.create('Ext.tree.Panel', {
title: 'TreeGrid使用xml作为数据源示例',
width:300,
height: 300,
renderTo: 'treegrid-example-use-xml',
collapsible: true,
useArrows: true,
rootVisible: false,
store: store,
multiSelect: true,
singleExpand: true,
columns: [{
xtype: 'treecolumn',
text: '地区名称',
flex: 2,
sortable: true,
dataIndex: 'area'
}, {
text: '邮政编码',
flex: 1,
sortable: true,
dataIndex: 'postcode'
}]
});
}
function getNodeInfo(node) {
var d = { attr: {} }, childNodes = node.childNodes, j = childNodes.length, i = 0, nodeName;
for (; i < j; i++) {
if (childNodes[i].nodeType == 1) {//过滤空白节点
nodeName = childNodes[i].nodeName;
if (nodeName == 'children') {
if (!d.children) d.children = [];
d.children[d.children.length] = childNodes[i];
}
else d.attr[nodeName] = nodeName == 'expanded' ? (childNodes[i].firstChild.nodeValue == 'true') : childNodes[i].firstChild.nodeValue;
}
}
return d;
}
function createNestedJsonFromXML(childNodes) { //通过解析XML生成treegrid需要的嵌套json对象，既NodeInterface数据，递归调用
var siblings = [], json = {}, i = 0, j = childNodes.length, d;
for (; i < j; i++) {
if (childNodes[i].nodeType == 1) {//过滤空白节点
d = getNodeInfo(childNodes[i]);
json = d.attr;
siblings[siblings.length] = json;
if (d.children) json.children = createNestedJsonFromXML(d.children);
}
}
return siblings;
}
function CreateTreeStore(rootEl) {
Ext.define('Task', { extend: 'Ext.data.Model', idgen: 'sequential', fields: ['area', 'postcode'] });
//生成空的TreeStore，通过ajax加载xml后分析添加进入
var store = Ext.create('Ext.data.TreeStore', { model: 'Task', root: { text: "." }, proxy: { type: 'memory'} });
var rootNode = store.getRootNode();
var NestedJSON = createNestedJsonFromXML(rootEl.getElementsByTagName('root')[0].childNodes);
console.log(NestedJSON)
rootNode.appendChild(NestedJSON); //添加NodeInterface数据到treestore中
createTreeGrid(store);
}
Ext.onReady(function () {
Ext.Ajax.request({
url: 'xml-treegrid.xml',
success: function (response, opts) { CreateTreeStore(response.responseXML); },
failure: function (response, opts) { alert('发生错误\nstatus：' + response.status + '\nresponseText：' + response.responseText); }
});
});
xml-treegrid.xml
<?xml version="1.0" encoding="utf-8"?>
<root>
<children>
<area>广西</area>
<postcode>500000</postcode>
<iconCls>task-folder</iconCls>
<children>
<area>桂林</area>
<postcode>540000</postcode>
<iconCls>task-folder</iconCls>
<children>
<area>七星区</area>
<postcode>541000</postcode>
<iconCls>task-folder</iconCls>
<children>
<area>高新区</area>
<postcode>541004</postcode>
<iconCls>task-folder</iconCls>
<children>
<area>创业园</area>
<postcode>541004</postcode>
<iconCls>task</iconCls>
<leaf>true</leaf>
</children>
<children>
<area>高新大厦</area>
<postcode>541004</postcode>
<iconCls>task</iconCls>
<leaf>true</leaf>
</children>
</children>
<children>
<area>朝阳区</area>
<postcode>541003</postcode>
<iconCls>task</iconCls>
<leaf>true</leaf>
</children>
</children>
<children>
<area>象山区</area>
<postcode>542000</postcode>
<iconCls>task</iconCls>
<leaf>true</leaf>
</children>
<children>
<area>雁山区</area>
<postcode>545000</postcode>
<iconCls>task</iconCls>
<leaf>true</leaf>
</children>
</children>
<children>
<area>南宁</area>
<postcode>510000</postcode>
<iconCls>task</iconCls>
<leaf>true</leaf>
</children>
</children>
<children>
<area>北京</area>
<postcode>100000</postcode>
<iconCls>task-folder</iconCls>
<children>
<area>朝阳区</area>
<postcode>110000</postcode>
<iconCls>task</iconCls>
<leaf>true</leaf>
</children>
<children>
<area>海淀区区</area>
<postcode>120000</postcode>
<iconCls>task</iconCls>
<leaf>true</leaf>
</children>
</children>
</root>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：Ext4 TreeGrid使用xml作为数据源示例