EXTJS 4.1-Ext.面板标题字段未正确显示

我对ExtJS面板有问题。问题是，每个面板的标题都位于整个区域的左上角

i、 e.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
                    ]
                }
            ]
        }
      ]
    }); 
});

Ext.onReady（函数（）{
Ext.QuickTips.init（）；
var widget1=新的外部面板({
id:'widget1'，
身高：50，
自动滚动：错误，
标题：“校长1（45项）”，
默认值：{
边界：是的，
可折叠的：是的，
真的吗
}
});
var widget2=新的外部面板({
id:'widget2'，
身高：200，
自动滚动：错误，
标题：“校长2”，
默认值：{
边界：是的，
可折叠的：是的，
真的吗
}
});
var widgetPanel=新的外部面板({
id:'widgets'，
身高：800，
宽度：300，
自动滚动：错误，
项目：[
widget1，
widget2
]
});         
var mainPanel=新的Ext.Panel（{
id:“主面板”，
bodyBorder:错误，
自动高度：正确，
自动宽度：正确，
布局：'hbox'，
renderTo:LOCATION.div，
项目：[
widgetPanel，
{ 
xtype:“面板”，
id:“内容”，
待定：[
{
xtype:'tbtext'，
id:“标题”，
html:“主标题”，
样式：'margin:1px15px0；'
},
],
布局：'hbox'，
填充：“5px 0”，
项目：[{
xtype:“面板”，
id:“集装箱面板”，
滚动：‘垂直’，
高度：“100%”，
项目：[//待办事项
]
}
]
}
]
}); 
});

widgetPanel

缺少布局（并且有两个子面板，因此ExtJS不可能知道如何渲染这些子面板）；根据，您必须具有布局

---

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

您的

widgetPanel

没有布局，因此ExtJS不知道如何渲染这两个面板。您必须定义一个布局，请参见。我在-layout中添加了“vbox”，但它似乎没有改变任何内容，因为您有一个hbox和vbox，没有弯曲或宽度/高度。看看这段代码，你的部分代码工作得很好。哦，我从来都不知道这个工具jFiddle。你是救命恩人。flex应该可以解决这个问题。谢谢你，伙计。如果你把这个作为答案，我会把它列为答案。