再探Ext中TreePanelコントロールとTabPanelコントロールの組み合わせテスト

「ExtのTreePanelコントロールとTabPanelコントロールの組み合わせテスト」では、TreePanelコントロールのツリーノードをクリックし、右のTabPanelコントロールで新しいページを開くには3つの方法(一応知っています)がありますが、前回の例では2番目と3番目の方法が1ステップテストに進み、いくつかの改善があります.
 
第2の方法では、例の右側に開くファイルは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が表示されます.
 
第3の方法では、私は「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);
	}
});