CODEWITHSUNDEEP
javascriptextjsfirebug
Huuuze
Huuuze

Reputation: 16367

ExtJS panel does not render properly unless I open Firebug?

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

Upvotes: 7

Views: 5487

Answers (3)

It Grunt
It Grunt

Reputation: 3378

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

Upvotes: 1

Brian Moeskau
Brian Moeskau

Reputation: 20431

Your outer Panel has no layout. Try adding layout:'fit' to it and see if that helps.

Upvotes: 1

Mic
Mic

Reputation: 25174

Try with chrome, if it works, may be you left a console.log somewhere in your code.

When firebug is open, console exists.
When it is closed, console does not exist, and console.log breaks the code silently.

Upvotes: 0

Related Questions