Question

在ExtJS4中，页面是border布局，west部分是树布局，点击树中的某个节点,在center布局中实现页面载入

点击左边的在售商品管理，在右边显示相应的信息

Answer 1

在树布局中添加listeners,代码如下
listeners: {
itemclick: function(view, record, item, index, e) {
if(record.raw.path){ //这步是判断点击当前节点时是否存在path,因为字节点会有相应的属性值，父节点不应该有相应的属性值，可根据实际情况自行修改
var reid = record.get('id'); //获取当前节点的id
var tabs = Ext.getCmp('center-iframe');//获取center布局的id
var addUserPanel = tabs.getComponent(record.raw.id); //新增一个component
var url = record.raw.path+'.action';
//增加新页面
if(!addUserPanel ){//先判断你需要打开的tab页是否已经打开，如果没打开，则新增一个，否则不变
addUserPanel = new Ext.form.Panel({
id : record.raw.id, //我这个id是树节点的id，可根据情况写死
title : record.raw.text, //同上
xytpe : 'tablepanel',
iconCls: 'tabs',
tabTip : record.raw.text,
closable : true,
html:'<iframe id=mainPage width="100%" height="100%" frameborder=0 src='+url+'></iframe>' //我这个是嵌套页面，你可以不用嵌套，可以在进行items，我建议嵌套，这样就可以在新页面尽心编辑了，否则都在当前这个页面写会很乱而且调试比较困难
});
tabs.add(addUserPanel );
}
tabs.setActiveTab(addUserPanel);

}

}
}

Answer 2

监听树的itemClick事件，通过tabPanel的add方法加入一个Panel （最好是提取的公共组件，就是基础信息和销售信息的标签页），当然每次监听都要先预判一下该标签页是否已被创建（设一个可以通过菜单能够拼装出来Panel的ID，在创建的时候注入进去，点菜单的时候拼出来Ext.getCmp一下），有则直接激活（setActiveTab），没有则创建，本身新创建的会自动激活该页，保险起见，你就在激活一次

Answer 3

在树节点的点击事件定义函数，在该函数中取得tabpanel对象，然后调用tabpanel的add方法将内容添加进去

追问

呃，我刚学，不是很理解你说的那种方法，你方便发个小例子给我吗？

追答

var tab = tabPanel.getActiveTab( ); tab.add({xtype:''})
不知道对你有没有帮助