extjs - EXTJS 4.1 - Ext.Panel 标题字段显示不正确

Question

我在使用 ExtJS 面板时遇到问题。问题是每个面板的标题都在整个区域的左上角相互重叠放置。

即 HEADER1、HEADER2 和 MAIN HEADER 都相互重叠，甚至不在各自面板的范围内（它们都在最左上角）

有什么想法吗？我的代码在下面列出。

Ext.onReady(function(){
    Ext.QuickTips.init();

    var widget1 = new Ext.Panel({
    id:'widget1', 
    height: 50,
    autoScroll:false,
    title: '<div class="widget-header">HEADER1 <span class="header1-count">(45 ITEMS)</span></div>',
    defaults: {
        border:true,
        collapsible:true, 
        animCollapse:true
    }
    });

    var widget2 = new Ext.Panel({
    id:'widget2', 
    height: 200,
    autoScroll:false,
    title: '<div class="widget-header">HEADER2</div>',
    defaults: {
        border:true,
        collapsible:true, 
        animCollapse:true
    }
    });

    var widgetPanel = new Ext.Panel({
    id:'widgets',  
    height: 800,
    width: 300,
    autoScroll:false,
    items: [
        widget1,
        widget2
    ]
    });         

    var mainPanel = new Ext.Panel({ 
    id:'main-panel', 
    bodyBorder:false,
    autoHeight:true,
    autoWidth:true,
    layout:'hbox', 
    renderTo: LOCATION.div,
    items: [
        widgetPanel,
        { 
            xtype:'panel', 
            id:'content',
            tbar: [
                {
                    xtype:'tbtext', 
                    id:'title', 
                    html:'<h1>MAIN HEADER</h1>', 
                    style:'margin:1px 15px 0 0;'
                },
            ],
            layout:'hbox',
            padding: '5px 0 0 0',
            items: [{
                    xtype:'panel',
                    id:'container-panel',           
                    scroll: 'vertical', 
                    height: '100%',
                    items: [//todo
                    ]
                }
            ]
        }
      ]
    }); 
});

Answer 1

widgetPanel缺少一个布局（并且有两个子面板，所以 ExtJS 不会知道如何呈现这些）；根据文档，您必须有一个布局。

还要确保在您的 hbox 和 vbox 布局中包含 flex（或宽度或高度）。