左侧是树形结构,点击树节点,右侧会显示对应页面。
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = 'ext-2.1/resources/images/default/s.gif';
var tree = new Ext.tree.TreePanel({
region : 'west',
// True表示为面板是可收缩的,并自动渲染一个展开/收缩的轮换按钮在头部工具条
collapsible : true,
title : '标题',// 标题文本
width : 200,
border : false,// 表框
autoScroll : true,// 自动滚动条
animate : true,// 动画效果
rootVisible : true,// 根节点是否可见
split : true,
tbar : [{
text : '展开',
handler : function() {
tree.expandAll();
}
}, '-', {
text : '折叠',
handler : function() {
tree.collapseAll();
tree.root.expand();
}
}],
listeners : {
click : function(node) {
// 得到node的text属性
Ext.Msg.alert('消息', '你点击了: "' + node.attributes.text
+ "'");
}
}
});
var root = new Ext.tree.TreeNode({
text : '我是根'
});
var root_node1 = new Ext.tree.TreeNode({
text : '我是根的1枝',
href : 'menu.jsp',
hrefTarget : 'main'
});
var root_node2 = new Ext.tree.TreeNode({
text : '我是根的2枝',
href : 'tree.jsp',
hrefTarget : 'main'
});
// 插入节点为该节点的最后一个子节点
root.appendChild(root_node1);
root.appendChild(root_node2);
// 设置根节点
tree.setRootNode(root);
new Ext.Viewport({
enableTabScroll : true,
layout : 'border',
items : [{
title : '面板',
region : 'north',
height : 50,
html : '<h1>网站后台管理系统</h1>'
}, tree, {
id : 'main',
region : 'center',
html : '<iframe name="main" width="100%" height="100%"></iframe>'
}]
});
});