views:

53

answers:

3

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

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.

Mic
If you have Firebug installed console.log() exists even if the FireBug panel is closed
wezzy
Try just a script with console.log();alert('hi'); An insure Firebug is really off, not just hidden. The alert should not popup in FF, or maybe this is a config somewhere.
Mic
@wezzy That's not true most of the time. When firebug is closed, `console()` is undefined. Firebug can *look* closed but just be hidden (you can tell the difference by whether the icon is grayed). Confirm this behavior with this demo: http://jsbin.com/avenu4/5 .
Brock Adams
+1  A: 

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

bmoeskau
+1  A: 

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
It Grunt
"layoutOnTabChange: true" did the trick. Thanks!
Huuuze