Ext中TreePanel控件和TabPanel控件搭配测试

在实际的项目中，左边树形菜单，提供各种功能点击，右边一个面板，随着左边节点的选择表现不同的功能内容，这是一个相当经典的布局，在Ext框架中，有两个控件TreePanel和TabPanel刚好完成这些功能，本文就这两个控件的搭配使用和点击左边树节点引起右边内容变化的方法作一个简单的介绍。首先看下面的具体的代码。

代码

menuTree.root.appendChild(new Ext.tree.TreeNode({
id:'functionPanel',
text:'通过函数打开',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = contentPanel.getComponent(node.id);
if (!n) {
var p = new fnPanel();
p.id = node.id;
p.title = node.text;
n = contentPanel.add(p);
n.show().doLayout(); //关键地方,重新刷新布局
}
contentPanel.setActiveTab(n);
}
}
}));

//通过扩展来构建要创建的面板
fnPanel = Ext.extend(Ext.Panel, {
closable:true,
autoScroll:true,

//创建面板内容
createFormPanel:function() {
return new Ext.form.FormPanel({
buttonAlign:'center',
labelAlign:'right',
labelWidth:36,
frame:false,
border:false,
//指定为绝对定位,可以让控件布局随意确定位置
style:'position:absolute;top:30%;left:30%;width:422px;',
items:[{
xtype:'textfield',
fieldLabel:'姓名',
width:350
},{
xtype:'textfield',
fieldLabel:'性别',
width:350
}],
buttons:[{text:'确定'}, {text:'取消'}]
});
},

//重装控件初始化函数,在该函数中完成面板中内容的初始化
initComponent:function() {
fnPanel.superclass.initComponent.call(this);
this.fp = this.createFormPanel();
this.add(this.fp);
}
});