javascript - 除非我打开 Firebug，否则 ExtJS 面板无法正确呈现？

Question

我将以下 ExtJS 面板嵌入到另一个面板中，然后该面板位于 TabPanel 中，而 TabPanel 位于 FormPanel 中。

话虽如此，这些开始/结束日期字段最初显示在非常小的单元格中——这些单元格小到我看到水平滚动条。现在这是奇怪的部分:如果我打开 Firebug，一切都会就位。

有人知道这是怎么回事吗？为什么它一开始就不能正确呈现，为什么 Firebug 只需打开 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

我以前见过这个问题...您可能需要做三件事。

1. 如果包含日期字段面板的父面板是 FormPanel，则设置 deferredRender : true
2. 在您的选项卡面板上，设置 layoutOnTabChange: true <-- 我猜 datefields 面板不是默认的事件面板吧？
3. 在您上面的代码中，为日期字段面板提供一个layout : 'fit"。这样它就可以更好地管理带有列布局的面板