Question

我正在创建一个工具栏，然后将其添加到ExtJS中的Panel。它看起来很棒，除了IE7，它的高度比其他浏览器大得多。 ExtJS以内联CSS样式硬编码高度。有些菜单是在工具栏之前创建的......

var menu = Ext.create('Ext.menu.Menu', {
     id: 'mainMenu',
     style: {
        overflow: 'visible'
},
items: [
    {
        text: 'choice1'
   },{
        text: 'choice2'
   },{
        text: 'choice3'
}]
});
var tb = Ext.create('Ext.toolbar.Toolbar');
tb.suspendLayouts();
tb.add({
    text:'Choice 1',
    iconCls: 'bmenu',  
    menu: menu  
},{
    xtype: 'tbfill'
},{
    xtype: 'tbtext',
    text: 'Last name'
});
menu.add(' ');
tb.add('-', {
iconCls: 'icon-help',
clickEvent: 'mousedown'
});
tb.resumeLayouts(true);
    var viewport = new Ext.Viewport({
    layout: 'border', 
    renderTo: Ext.getBody(),
    items: [{
        region: 'north',
        id: 'North', 
        items: [{
            region: 'center',
            style: {
                overflow: 'visible'   
            },
        }, tb]
    },{
        region: 'west',
        id: 'West', 
        xtype: 'panel',
        layout: 'vbox', 
        collapsible: true,
        split: true,
        width: 200,
        items: [{
            xtype: 'panel',
            id: 'upperWest',
            width: 200, 
            flex: 1,
            html: myAlerts
        },{
            xtype: 'panel',
            id: 'lowerWest',
            width: 200,
            flex: 3, 
            html: quickView        
        }
      ]
]
    },{
        region: 'center',
        id: 'center',
        height: '100%', 
        minheight: 200,
        minwidth: 200, 
        layout: 'border',
        border: false, 
        autoScroll:true, 
        tbar: [
            {xtype: 'tbfill'},
               {
                xtype: 'combo',
                height: 20,
                editable: false,
                store: [
                    'choice1',
                    'choice2',
                    'choice3',
                ],
                value: 'choice1'
            },
            {xtype: 'tbfill'}
        ],
        items: [{
            region: 'east',
            id: 'center-east', 
            height: '100%',
            minheight: 200,
            width: 200, 
            items: barChartPanel
        },{
            region: 'center',
            id: 'center-center',
            layout: 'fit', 
            baseCls:'x-plain',
            items: columnChartPanel
        }]
    },{
        region: 'east',
        id: 'moreOptions',
        xtype: 'panel',
        title: 'More Options',
        collapsible: true,
        split: true,
        width: 200,
        items: [
            {xtype: 'panel',
            id: 'rightPanel1',
            collapsible: true,
            collapsed: true, 
            }
        ]
    },{
        region: 'south',
        xtype: 'container',
    }]
});

Answer 1

找到解决方案。 HTML 5 Boilerplate包含一个CSS属性，它为一些元素添加了底部填充。这导致ExtJS也将顶部填充添加到工具栏。我删除了CSS元素，问题就消失了

IE7中ExtJS工具栏高度不正确

1 个答案: