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

 

　　在《Ext中TreePanel控件和TabPanel控件搭配测试》一文中提到，点击TreePanel控件中一个树节点，在右边TabPanel控件中打开新的页面有三种方法（暂且我知道的），而上次例子中第二种和第三种方法进一步测试又有一些改进。

 

　　第二种方法中，例子中右边打开的文件是一个Window，而如果换成其他的控件，如FormPanel，也不显示出来，所以auto.php中的代码修改如下：

 

<?php header('Content-Type:text/html;charset=utf-8'); ?>
<script type="text/javascript">
new Ext.form.FormPanel({
	renderTo:'fp_div', //依附于指定DIV上面,这样才会显示该FormPanel
	buttonAlign:'center',
	labelAlign:'right',
	labelWidth:36,
	frame:false,
	border:false,
	items:[{
		xtype:'textfield',
		fieldLabel:'姓名',
		width:350
	},{
		xtype:'textfield',
		fieldLabel:'性别',
		width:350
	}],
	buttons:[{text:'确定'}, {text:'取消'}]
});
</script>
<div id="fp_div" style="position:absolute;top:30%;left:30%;width:422px;"></div>

 

　　主要是添加了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);
	}
});