在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.create('Ext.form.Panel', {

title: 'Simple Form with FieldSets',

labelWidth: 75, // label settings here cascade unless overridden

url: 'save-form.php',

frame: true,

bodyStyle: 'padding:5px 5px 0',

width: 550,

renderTo: Ext.getBody(),

layout: 'column', // arrange fieldsets side by side

defaults: {

bodyPadding: 4

},

items: [{

// Fieldset in Column 1 - collapsible via toggle button

xtype:'fieldset',

columnWidth: 0.5,

title: 'Fieldset 1',

collapsible: true,

defaultType: 'textfield',

defaults: {anchor: '100%'},

layout: 'anchor',

items :[{

fieldLabel: 'Field 1',

name: 'field1'

}, {

fieldLabel: 'Field 2',

name: 'field2'

}]

}, {

// Fieldset in Column 2 - collapsible via checkbox, collapsed by default, contains a panel

xtype:'fieldset',

title: 'Show Panel', // title or checkboxToggle creates fieldset header

columnWidth: 0.5,

checkboxToggle: true,

collapsed: true, // fieldset initially collapsed

layout:'anchor',

items :[{

xtype: 'panel',

anchor: '100%',

title: 'Panel inside a fieldset',

frame: true,

height: 52

}]

}]

})

---