在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不好，我也想看看有没有其他的方法

试试这样

{

layout : 'form',

border : false,

id :'result_items',

items : []

}

var panel = new Ext.Panel({

id : 'itemPanel',

layout : 'form',

border : false,

items : []

})

for(var j = 0j <dataList[0].items.lengthj ++){

subPanel = getLink(dataList[0].items[j])

Ext.getCmp('itemPanel').add(subPanel)

}

Ext.getCmp('result_items').add(panel)

最外层那个formpanel调用一下doLayout()方法。

要重新添加组件就先Ext.getCmp('result_items').remove(Ext.getCmp('itemPanel'))

再像上面那样做

---