Question

I have the following ExtJS Panel embedded in another Panel, which then resides in a TabPanel and the TabPanel is in a FormPanel.

With that being said, these start/end date fields are initially displayed in very small cells — the cells are so small that I see horizontal scroll bars. Now here’s the weird part: if I open Firebug, everything pops into place.

Does anyone know what’s going on? Why isn’t it rendering properly in the first place and why does Firebug cause everything to work properly simply by opening Firebug?

var dateFields = new Ext.Panel({
    id: 'dateFields',
    labelAlign: 'bottom',
    border: false,
    items: [{
        layout: 'column',
        defaults: {
            columnWidth: 0.5
        },
        items: [{
            layout: 'form',
            border: false,
            items: [{
                xtype: 'datefield',
                name: 'start_date',
                fieldLabel: 'Start Date'
            }]
        }, {
            layout: 'form',
            border: false,
            items: [{
                xtype: 'datefield',
                name: 'end_date',
                fieldLabel: 'End Date'
            }]                  
        }]
    }]
});

Answer 1

I have seen this issue before… There are three things you may need to do.

1. If the parent panel that contains the datefields panel is a FormPanel, set deferredRender : true
2. On your tab panel, set layoutOnTabChange: true <– I’m guessing that the datefields panel is not the default active panel right?
3. On your code above, give datefields Panel a layout : ‘fit”. This is so that it can manage the panel with the column layout better