最近研究了下ext，其漂亮的UI十分吸引人。但是在制作tree控件的時候，利用JSON處理不是特別方便。因為大部分的應用的菜單都是配置在XML格式的文件中。于是，我寫了一個XML文件，利用DOM4J解析XML文件，生成JSON字符串到前臺。特殊的一點是，這個布局左邊是一個accordion布局，于是利用XML文件中的sub-menu進行了配置。具體的XML格式如下：
<?xml version="1.0" encoding="UTF-8"?>
<menu-config>
<sub-menu id="subMenu1" text="用戶管理">
<tree id="990011" text="人員管理" href="#" leaf="true" />
<tree id="990021" text="單位管理" href="#" leaf="true" />
<tree id="990031" text="行政代碼管理" href="#" leaf="true" />
<tree id="990041" text="用戶管理" href="#" leaf="true" />
<tree id="990051" text="權限功能管理" href="#" leaf="true" />
</sub-menu>
<sub-menu id="subMenu2" text="采伐證管理">
<tree id="990011" text="人員管理" href="#" leaf="true" />
<tree id="990021" text="單位管理" href="#" leaf="true" />
<tree id="990031" text="行政代碼管理" href="#" leaf="true" />
<tree id="990041" text="用戶管理" href="#" leaf="true" />
<tree id="990051" text="權限功能管理" href="#" leaf="true" />
</sub-menu>
</menu-config>
最終頁面效果如下示：
代碼比較多，不能全部貼出來，最核心的JS貼出來看看。
Ext.onReady(function() 
{
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Ext.Ajax.request({
url : "txn900002.do",
method : "get",
success : function(response, options) {
var array = Ext.util.JSON.decode(response.responseText);
for (var i = 0; i < array.length; i++) {
var obj = array[i];
accordion.add({
id : obj.id,
title : obj.text,
html : "<div align=left valign=top id=" + obj.id
+ "></div>"
});
accordion.doLayout(true);
buildTree(obj.id);
}
}
});
var tab = new Ext.TabPanel({
region : "center",
margins : "0 5 0 0",
deferredRender : false,
activeTab : 0,
resizeTabs : true,
enableTabScroll : true
});
tab.add({
id : "welcome",
title : "welcome",
html : "<hr><h1>hello world</h1>"
});
function treeClick(node, e) {
if (!node.isLeaf()) {
e.stopEvent();
} else {
var n = tab.getComponent(node.id);
alert(node.href);
if (!n) {
var n = tab.add({
"id" : node.id,
"title" : node.text,
closable : true,
html : "<iframe src=txn" + node.id
+ ".do style='width:100%;height:100%' ></iframe>"
});
}
tab.setActiveTab(n);
}
}
function buildTree(subMenuId) {
var root = new Ext.tree.AsyncTreeNode({
text : "Autos",
draggable : false,
id : "source"
});
var tree = new Ext.tree.TreePanel({
el : subMenuId,
border : 0,
animate : true,
enableDD : false,
loader : new Ext.tree.TreeLoader({
dataUrl : "txn900001.do?subMenuId=" + subMenuId,
requestMethod : "GET"
}),
root : root,
rootVisible : false,
autoHeight : true,
containerScroll : false
});
tree.render(subMenuId);
root.expand();
tree.on("click", treeClick);
}
var header = new Ext.Panel({
region : "north",
margins : "0 5 0 5",
height : 80,
collapsible : true,
split : true,
minSize : 80,
maxSize : 80
});
var status = new Ext.Panel({
region : "south",
margins : "0 5 5 5",
height : 20,
minSize : 20,
maxSize : 20,
split : true
});
var accordion = new Ext.Panel({
region : "west",
margins : "0 0 0 5",
split : true,
width : 210,
layout : "accordion",
autoScroll : true,
animCollapse : false,
animate : true,
layoutConfig : {
animate : true
}
});
var viewport = new Ext.Viewport({
layout : "border",
items : [header, status, accordion, tab]
});
});