在ExtJs 3.4中,我有一个带有两个选项卡的TabPanel,第二个选项卡包含一个FormPanel,其中包含一个ButtonGroup。如果第二个选项卡处于活动状态,当我加载页面时,一切都很好,但是当第一个选项卡处于活动状态并切换到第二个选项卡时,按钮组中没有按钮,只有标签。这是代码:
var tabs = new Ext.TabPanel({
renderTo: 'tabs',
width:500,
forceLayout: true,
activeTab: 0,
deferredRender: false,
defaults:{autoHeight: true},
items:[
{contentEl:'tab1', title: 'Tab1'},
{contentEl:'tab2', title: 'Tab2'}
]
});
var form = new Ext.form.FormPanel({
width : 400,
autoHeight: true,
renderTo: 'form',
bodyStyle: 'padding: 5px',
items: [
{
xtype: 'buttongroup',
fieldLabel: 'Label',
items:
[
{
xtype: 'button',
text: 'Find By User',
width: 100,
scope: this,
handler: this.handleFind
},
{
xtype: 'button',
text: 'Find All',
width: 100,
scope: this,
handler: this.handleFindAll
}
]
}
]
});
我设置了deferredRender: false
和forceLayout: true
,也尝试了hideMode: 'offsets'
,但这些没有帮助。
答案 0 :(得分:0)
好吧,我将hideMode: 'offsets'
添加到defaults
的{{1}},它运行正常。几年前我做了同样的事情而没有显着的结果。
答案 1 :(得分:0)
删除renderTo: 'form'
并查看工作代码here:
var form = new Ext.form.FormPanel({
width: 400,
autoHeight: true,
//renderTo: 'form',
bodyStyle: 'padding: 5px',
items: [{
xtype: 'buttongroup',
fieldLabel: 'Label',
items: [{
xtype: 'button',
text: 'Find By User',
width: 100,
scope: this,
handler: this.handleFind
}, {
xtype: 'button',
text: 'Find All',
width: 100,
scope: this,
handler: this.handleFindAll
}]
}]
});
var tabs = new Ext.TabPanel({
renderTo: 'tabs',
width: 500,
forceLayout: true,
activeTab: 0,
//deferredRender: false,
height: 300,
defaults: {
autoHeight: true
},
items: [{
contentEl: 'tab1',
title: 'Tab1'
}, {
//contentEl: 'tab2',
title: 'Tab2',
items: [form]
}]
});