在《Ext中TreePanel控件和TabPanel控件搭配测试》一文中提到，点击TreePanel控件中一个树节点，在右边TabPanel控件中打开新的页面有三种方法（暂且我知道的），而上次例子中第二种和第三种方法进一步测试又有一些改进。
第二种方法中，例子中右边打开的文件是一个Window，而如果换成其他的控件，如FormPanel，也不显示出来，所以auto.php中的代码修改如下：
主要是添加了renderTo属性和添加了一个div层，这样会让新增加的FormPanel显示出来。
第三种方法中，我提到必须是'fit'布局，会来经网友提醒，也可以不是'fit'布局，可以通过show().doLayout()显示出来，具体代码如下：
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);
}
});