怎样实现extAPI那种点击左边树后，右边的panel代替上一个panel
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 : 'project-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);
}
}
该怎样改正？
[解决办法]
var a = { 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'; //如果存在第0个元素 先将它的activate事件去掉 if (centerPanel.items) { var fistpanel = centerPanel.items.get(0); if (fistpanel) { fistpanel.removeListener("activate", this.onActiveTabSize); } } centerPanel.removeAll(); //此处删掉TabPanel中的Panel /** * 如果可以获取到tab页,就不用再次添加tab页了 (获取不到时tab=undefined) * (也就是说如果当前tab页已经渲染就不用再次添加该tab了) */ if (!tab) { // 动态创建tab var newTab = centerPanel.add(new Ext.Panel({ id : tabId, // tab的唯一id title : tabTitle, // tab的标题 iconCls : 'project-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); } }}