再探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);
	}
});

 

评论

3 楼 jerrycong 2008-09-25  

有几个问题请教一下:
1. 我在用iframe作法的时候,当第一次点击树节点显示tab,在ie里面报告主页面无法被打开,终止操作,比如我整个页面叫main.html,点击节点在tab里面加载ohter.html,则报告ie无法打开main.html,已终止操作,但是重新刷新后就可以了,而且在firefox下面没有这种情况,如何理解?
2.iframe如何传递参数?
3.用autoload的作法时,是不是加载tab页面的javascript会被整合到主页面里面,连onReady函数都不需要调用

请释疑,谢谢

2 楼 379548695 2008-09-10  

见笑啦。搞定。原来是路径问题。还有我html没有乱码啊。

1 楼 379548695 2008-09-09  

楼主我确认我没有同名的 div可是我在调用这个也么怎么出不来啊
是jsp
内容入下
<%@ page language="java"  pageEncoding="utf-8"%>
<script type="text/javascript" src="../js/user/UserManager.js"></script>
<script type="text/javascript" src="../js/user/AddUser.js"></script>
<script type="text/javascript" src="../js/user/EditUser.js"></script>
<div id="grid" ></div>

加载提示显示啦。就是tab是空白没内容怎么搞的？