我在使用 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
]
}
]
}
]
});
});