在Extjs中，我想通过点击一个按钮，然后在一个TabPanel中加入一个Panel组件，请问怎么做？

var centerPanel = Ext.create('Ext.TabPanel', {

region: 'center',

deferredRender: false,

activeTab: 0,

items: []

})

var ftab = Ext.create('Ext.Panel', {

tpl: new Ext.XTemplate('<iframe style="width: 100%height: 100%border: 0padding:4px 4px 4px 4px" src="{url}"></iframe>'),

load: function (b) { this.update(this.tpl.apply(b)) }, clear: function () { this.update("") },

title: '首页',

autoScroll: true

})

ftab.load({ url: '<%=Url.Action("Welcome",new{ controller="Home"}) %>' })

centerPanel.add(ftab)

function trsel(view, record, item, index, e) {

if (record.raw.leaf) {

var tab = centerPanel.getComponent("tab" + record.raw.id)//获取tab对象

if (!tab) {//如果tab不存在，就创建并添加到centerPanel中

tab = Ext.create('Ext.Panel', {

tpl: new Ext.XTemplate('<iframe style="width: 100%height: 100%border: 0padding:4px 4px 4px 4px" src="{url}"></iframe>'),

load: function (b) { this.update(this.tpl.apply(b)) }, clear: function () { this.update("") },

id: "tab" + record.raw.id,

title: record.raw.text,

closable: true,

autoScroll: true

})

tab.load({ url: '/' + record.raw.menu_area + '/' + record.raw.menu_controller + '/' + record.raw.menu_action })

centerPanel.add(tab)

}

centerPanel.setActiveTab(tab)//设置显示当前面板

}

}

函数是点击菜单树时调用的。你自己调整一下，点按钮时调这个函数就可以。不过网上说用iframe不好，我也想看看有没有其他的方法

实现代码如下：

Ext.onReady(function(){

var centerRegion = new Ext.TabPanel({

region : 'center',

margins : '3 3 3 0',//距离top、right、bottom、left边界的距离,单位为像素

activeTab : 0,

defaults : {

autoScroll : true

},

items : [{

title : '主页',

html : '内容'

}]

})

centerRegion.render('con')

var westRegion = new Ext.Panel({

title : '导航',

region : 'west',

split : true,

width : 200,

//True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条

collapsible : true,

margins : '3 0 3 3',

cmargins : '3 3 3 3',

layout : 'accordion',

layoutConfig : {

titleCollapse : true,//单击标题就可以折叠面板

animate : true,//展开的效果

activeOnTop : true//是否可以改变顺序

},

items : []

})

new Ext.Viewport({

layout : 'border',

items : [{

region : 'north',

height : 100,

title : '顶部面板'

},

{

region : 'south',

height : 30,

title : '底部面板'

},

westRegion,

centerRegion]

})

})

---