EXTJS 4.1 - Ext.Panel標題字段顯示不正確

我遇到ExtJS面板問題。問題在於，每個面板的標題都放置在整個區域的左上角。EXTJS 4.1 - Ext.Panel標題字段顯示不正確

即頭1，HEADER2和主頭都相互重疊，並不甚至在自己的小組討論的範圍（他們都是在非常左上角）

任何想法是怎麼回事？我的代碼列在下面。

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

來源

2012-08-07 azdragon2

您的'widgetPanel'沒有佈局，因此ExtJS不知道如何渲染這兩個面板。您必須定義佈局，請參閱[文檔]（http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel-cfg-layout）。 – Izhaki 2012-08-07 23:02:11

我添加了 - 佈局：'vbox'，但它似乎沒有改變任何東西 – azdragon2 2012-08-07 23:05:41

這是因爲你有一個沒有flex或寬度/高度的hbox和vbox。看看這個[JsFiddle]（http://jsfiddle.net/Izhaki/MSYaG/），它展示了你的部分代碼運行良好。 – Izhaki 2012-08-07 23:08:14

widgetPanel缺少佈局（並有兩個子板，所以沒有辦法的ExtJS會知道如何呈現這些）;根據docs，你必須有一個佈局。

同時一定要與你的橫向盒和VBOX佈局在一起，包括柔性（或寬度或高度）。

來源

2012-08-07 23:23:05 Izhaki

EXTJS 4.1 - Ext.Panel標題字段顯示不正確

回答

相關問題