ExtJS 3.4:在隐藏的tabpanel中渲染按钮

时间:2013-07-20 11:40:09

标签: javascript extjs tabpanel buttongroup

在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: falseforceLayout: true,也尝试了hideMode: 'offsets',但这些没有帮助。

2 个答案:

答案 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]
    }]
});