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无法知道如何渲染这些布局）;根据{{3}}，您必须有布局。

还要确保将flex（或宽度或高度）与hbox和vbox布局一起包含在内。

EXTJS 4.1 - Ext.Panel标题字段无法正确显示

1 个答案: