ExtJs的TabPanel只能显示一个Tab页

[zhangye0807]

整个页面就一个TreePanel和一个TabPanel，当我点击树节点后，只有第一个页面会显示GridPanel的数据，点击第二个就没有反应了，但是能显示像统计报表之类的页面，没有限制，随便几个都可以，以下是源代码：

IndexPage = Ext.extend(Ext.Viewport, {
	/**
	 * 中间区域
	 */
	center : new Ext.TabPanel({
				id : "MainTab",
				region : "center",
				activeTab : 0,
				autoScroll : true, // 自动添加滚动条
				height : 80,
				split : true, // 添加分割线
				plugins : new Ext.ux.TabCloseMenu(),
				items : {
					closeable : true,
					iconCls : "zhangsong-homeTabIcon", // tab页图片样式
					title : "首页"
				}
			}),
	/**
	 * 构造方法
	 */
	constructor : function() {
		/**
		 * 将父类的构造拷贝过来
		 */
		IndexPage.superclass.constructor.call(this, {
			layout : "border", // 指定布局为border布局
			items : [{
						region : "west",
						xtype : "panel",
						layout : "accordion", // 手风琴布局
						title : "HRM-人力资源管理系统",
						split : true, // 添加分割线
						collapsible : true, // 自动伸缩
						width : 200, // 宽度
						layoutConfig : {
							// 展开折叠是否有动画效果
							animate : true
						},
						// 事件监听
						listeners : {
							'expand' : {
								fn : this.onExpandPanel,
								scope : this
							},
							'collapse' : {
								fn : this.onCollapsePanel,
								scope : this
							}
						},
						items : [{
							title : "控制面板", // 标题
							iconCls:"zhangsong-checkIcon",
							xtype : "treepanel", // 指定类型为树面板
							autoScroll : true, // 自动添加滚动条
							border : false, // 不要边框
							id : "mytree",
							tools : [{
										id : 'refresh', // 刷新按钮
										handler : this.onRefreshTreeNodes,
										scope : this
									}],
							// 树的加载器
							loader : new Ext.tree.TreeLoader({
										// tree数据的远程服务器地址,相当于proxy,每次请求会将node的id值传递给服务器
										dataUrl : "treeNode.do?operator=showNode"
									}),
							// 根节点
							root : new Ext.tree.AsyncTreeNode({
										text : "人力资源管理系统",
										iconCls : "zhangsong-treeRootIcon",
										id : "1"
									}),
							// 监听事件
							listeners : {
								"click" : {
									fn : this.onTreeNodeClick,
									scope : this
								}
							}
						}]
					}, this.center, {
						region : "south", // 南方布局
						split : true, // 添加分割线
						xtype : "panel", // 用panel作为容器
						border : false, // 不要边框
						frame : true, // 强制背景色
						height : 27,// 高度
						html : "<div align=\"right\"><font color=\"#15428b\">Developer:张宋　Email:[e-mail]　QQ:276448113　Tel:[phone]</font></div>"
					}]
		})

	},

	/**
	 * 动态添加标签页
	 * 
	 * @param {}
	 *            _name 节点的text值
	 * @param {}
	 *            _id 节点id
	 * @param {}
	 *            _css css
	 * @param {}
	 *            _link 节点的链接
	 */
	addTab : function(_name, _id, _css, _link) {
		// 动态创建tab标签的id
		var tabId = "tab_" + _id;
		// 动态创建tab标签的标题
		var tabTitle = _name;
		// 动态获取tree的某个节点的链接
		var tabLink = _link;
		// 获取主tab组件
		var centerPanel = Ext.getCmp("MainTab");
		// 根据id获取centerPanel组件的直接子组件的引用
		var tab = centerPanel.getComponent(tabId);
		// 这个要传到load页去，很关键，以后的布局要靠它
		var subMainId = 'tab_' + _id + '_main';
		/**
		 * 如果可以获取到tab页,就不用再次添加tab页了 (获取不到时tab=undefined)
		 * (也就是说如果当前tab页已经渲染就不用再次添加该tab了)
		 */
		if (!tab) {
			// 动态创建tab
			var newTab = centerPanel.add(new Ext.Panel({
						id : tabId, // tab的唯一id
						title : tabTitle, // tab的标题
						iconCls : "zhangsong-treeNodeLeafIcon", // 图片
						layout : 'fit', // 填充布局,它不会让load进来的东西改变大小
						border : false, // 无边框
						closable : true, // 有关闭选项卡按钮
						listeners : {
							// 侦听tab页被激活里触发的动作
							activate : this.onActiveTabSize,
							scope : this
						}
					}));

			// 激活加入的tab页(将新创建的tab页获取焦点)
			centerPanel.setActiveTab(newTab);

			newTab.load({
				url : tabLink, // 请求服务器的地址
				method : "post", // post请求方式
				params : {
					// 这里是关键的一个参数，传给load页，布局的关键
					subMainId : subMainId
				},
				scope : this, // 范围
				discardUrl : true, // 丢弃url
				nocache : true, // 不缓存
				text : "加载中,请稍候……",
				timeout : 3000, // 延时3秒
				scripts : true
					// 允许执行script
				});
		} else {
			// 激活已存在的tab页
			centerPanel.setActiveTab(tab);
		}
	},

	/**
	 * 激活TAB页时改变内部容器的大小
	 */
	onActiveTabSize : function() {
		// 获取当前活动的tab页的body元素的宽度 (不含任何框架元素)
		var w = Ext.getCmp('MainTab').getActiveTab().getInnerWidth();
		// 获取当前活动的tab页的body元素的高度 (不含任何框架元素)
		var h = Ext.getCmp('MainTab').getActiveTab().getInnerHeight();
		// 获取当活动的tab页的id
		var Atab = Ext.getCmp('MainTab').getActiveTab().id;

		// 获取组件
		var submain = Ext.getCmp(Atab + "_main");

		if (submain) {
			submain.setWidth(w);
			submain.setHeight(h);
		}
	},

	/**
	 * treePanel的刷新按钮事件
	 * 
	 * @param {}
	 *            _treePanel
	 */
	onRefreshTreeNodes : function() {
		Ext.getCmp("mytree").root.reload();

	},

	/**
	 * 树的节点单击事件
	 * 
	 * @param {}
	 *            _node 节点
	 * @param {}
	 *            _e
	 */
	onTreeNodeClick : function(_node, _e) {
		// 如果当前节点为叶子节点
		if (_node.isLeaf()) {
			// 获取当前节点的值
			var _nodeText = _node.attributes.text;
			// 获取当前节点的连接
			var _nodeLink = _node.attributes.linkUrl;
			// 获取当前节点的id
			var _nodeId = _node.attributes.id;
			// 调用动态添加Tab页方法
			this.addTab(_nodeText, _nodeId, '_css', _nodeLink);

		}
	},

	/**
	 * 面板展开事件
	 * 
	 * @param {}
	 *            _nowCmp
	 */
	onExpandPanel : function(_nowCmp) {
		// alert('展开之后触发');
		this.onActiveTabSize();
	},
	/**
	 * 面板闭合事件
	 * 
	 * @param {}
	 *            _nowCmp
	 */
	onCollapsePanel : function(_nowCmp) {
		// alert('面板关闭后触发');
		this.onActiveTabSize();
	}

[ceozc007]

昨天，遇到的是chart图表渲染到tabPanel里，我用的是添加事件的方法，今天无聊，又看了下 发现有2种方法————：
tabPanel页签展现渲染时，只会初始化渲染你所指定的activeTab这个子页签，其他的页签一律不渲染，所以也就不存在form的dom内容，如果没有指定activeTab页签不会初始化任何子页签，那么所有的form都不会得到渲染；另外，当鼠标点击一个子页签时，ext先判断该子页签是否渲染过，如果没有渲染先渲染该子页签的内容，也就是你的form,如果已经渲染过就直接显示。
知道以上原理，就不难理解你的问题了。
如果想解决这个问题，有两种方法：1、提交页签的form时，判断一下，如果form没有渲染，就让含有该form的子页签显示
2、改造ext页签的代码，使其在页签渲染时不只是初始化渲染activeTab，让它渲染所有的页签 。
如果你要一出来就渲染出所有的tab, 那么将tabpanel中的deferredRender属性 设置为false就好了。

[eggcanfly]

[Quote=引用 1 楼 ceozc007 的回复:]

昨天，遇到的是chart图表渲染到tabPanel里，我用的是添加事件的方法，今天无聊，又看了下 发现有2种方法————：
tabPanel页签展现渲染时，只会初始化渲染你所指定的activeTab这个子页签，其他的页签一律不渲染，所以也就不存在form的dom内容，如果没有指定activeTab页签不会初始化任何子页签，那么所有的form都不会得到渲染；另外，当鼠标点击一个子页签时，ext先……
[/Quote]

版本Extjs2.0

tabpanel里面
listeners: {
'tabchange': function(t, p) {
t.doLayout();
}
}

这是你原来的添加事件解法吧？

[gong_zhi_qiang]

params : {
// 这里是关键的一个参数，传给load页，布局的关键
subMainId : subMainId
},
这参数传递给jsp页面吗？能传到html页面吗？