javascript - ExtJS panel does not render properly unless I open Firebug? - Stack Overflow

admin管理员组

文章数量:1392088

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

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

• javascript
• extjs
• firebug

Share Improve this question Follow edited Jan 8, 2016 at 11:13 Abdul Rehman Yawar Khan 1,08733 gold badges1717 silver badges4040 bronze badges asked Aug 20, 2010 at 19:30 HuuuzeHuuuze 16.4k2626 gold badges7575 silver badges9191 bronze badges 1

• I assume any reflow will do the same, not just opening Firebug. Try resizing the browser, does it do the same thing? – Brian Moeskau Commented Aug 20, 2010 at 21:52

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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

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

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.

本文标签： javascriptExtJS panel does not render properly unless I open FirebugStack Overflow