Проблема с шириной bbar Ext.Panel в IE 6
Я только что столкнулся с ошибкой отображения в IE6 с фреймворком ExtJS. - Надеюсь, кто-нибудь сможет указать мне правильное направление.
В следующем примере bbar для панели отображается на 2 мм уже, чем панель, к которой она прикреплена (выровнена по левому краю) в IE6, тогда как, как и в 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>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Возможно, вам стоит попытаться установить ширину bbar:
main.getBottomToolbar().setWidth(500)
сразу после создания панели?
Но я думаю, проблема в том, что bbar отображается во внутреннем div панели, поэтому разные браузеры по-разному интерпретируют внешнее заполнение.
Также вы можете попробовать установить padding bbar на -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'}
]
});
Параметр border: false необходим, чтобы избежать двойного обрамления.