0

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

1 に答える 1

1

widgetPanelレイアウトがありません（2つのサブパネルがあるため、ExtJSがこれらをレンダリングする方法を知ることはできません）。ドキュメントごとに、レイアウトが必要です。

また、hboxおよびvboxのレイアウトと一緒にflex（または幅または高さ）を含めるようにしてください。

于 2012-08-07T23:23:05.900 に答える