ExtJS 3.4: Render buttons in hidden tabpanel

Question

In ExtJs 3.4 I have a TabPanel with two tabs, the second tab contains a FormPanel, what contains a ButtonGroup. If the second tab is active, when I load the page, then everything is good, but when the first tab is active and I switch to the second, then there is no button in the button group, just the label. Here is the code:

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

I set the deferredRender: false and forceLayout: true, also tried the hideMode: 'offsets', but these didn't help.

score 0 · Accepted Answer · answered Jul 20 '13 at 14:25

0

Well, I add the hideMode: 'offsets' to the defaults of the TabPanel and it works fine. I did the same a few years ago without significant result.

answered Jul 20 '13 at 14:25

user1721713

483
3
15

score 0 · Answer 2 · answered Jul 20 '13 at 14:31

0

Remove renderTo: 'form' and look at the working code 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]
    }]
});

answered Jul 20 '13 at 14:31

Darin Kolev

3,401
13
31
46

It gives me an: Uncaught TypeError: Cannot read property 'events' of undefined ext-all.js:7 Ext.Container.Ext.extend.lookupComponent ext-all.js:7 Ext.Container.Ext.extend.add ext-all.js:7 (anonymous function) ext-all.js:7 Ext.apply.each ext-base.js:7 Ext.Container.Ext.extend.add ext-all.js:7 Ext.Container.Ext.extend.initComponent ext-all.js:7 Ext.Panel.Ext.extend.initComponent ext-all.js:7 Ext.Component – user1721713 Jul 20 '13 at 14:57
Did you add `items: [form]`and comment `//contentEl: 'tab2',`? As you can see in the jsfiddle example, the code is running. If you post all your code in jsfiddle, i can take a look on it. – Darin Kolev Jul 20 '13 at 15:05
Yes, I did. Since that I solved this issue by adding hideMode: 'offsets' to the defaults. Thank you for your suggestion! – user1721713 Jul 20 '13 at 15:29

ExtJS 3.4: Render buttons in hidden tabpanel

2 Answers2