IE 6中Ext.Panel bbar的宽度问题
时间：2020-03-06 14:20:03 来源:igfitidea点击:
我刚刚在Ext6框架的IE6中遇到了显示故障。希望有人可以指出正确的方向。
在下面的示例中，面板的bbar的显示宽度比IE6中与其所附的面板(左对齐)窄2ems，在Firefox中，其显示的宽度与面板相同。
谁能建议如何解决这个问题？
我似乎可以通过指定面板的宽度(以ems为单位)或者以像素为单位的填充来解决此问题，但是我认为它可以按照下面的方式工作。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var main = new Ext.Panel({
renderTo: 'content',
bodyStyle: 'padding: 1em;',
width: 500,
html: "Alignment issue in IE - The bbar's width is 2ems less than the main panel in IE6.",
bbar: [
"->",
{id: "continue", text: 'Continue'}
]
});
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
解决方案
也许我们应该尝试强制bbar的宽度：
main.getBottomToolbar().setWidth(500)
在面板创建之后吗？
但是我认为问题在于bbar被渲染到面板的内部" div"中，因此不同的浏览器对外部填充的解释也不同。
我们也可以尝试将bbar的padding设置为-1em。
问题来自自定义的bodyStyle填充。这会使面板内容变大，但不会使工具栏变大。
一种可能的解决方案是进一步嵌套一个Ext面板，例如：
var main = new Ext.Panel({
renderTo: 'content',
width: 500,
items: {
bodyStyle: 'padding: 1em;',
border: false,
html: "Now alignment is fine."
},
bbar: [
"->",
{id: "continue", text: 'Continue'}
]
});
边框：需要false以避免双重边框。
