Border布局作為Ext中整個框架的布局應該說很普遍，一般North放一個應用的Logo bar,West一般會作為導航欄的放置位置；
而Center(East)往往作為整個應用的核心部分，而South位置也往往放置一些應用的版權等信息。
而導航欄一般會采用的呈現方式一般無非是Treepanel或者根據模塊放置多個Panel，而多數會采用的布局方式，往往是
Accordion的布局。比如像這樣(偷個懶直接用設計器寫的)：
MyViewportUi = Ext.extend(Ext.Viewport, {
layout: 'border',
initComponent: function() {
this.items = [
{
xtype: 'panel',
title: 'north',
region: 'north'
},
{
xtype: 'panel',
title: 'west',
region: 'west',
width: 201,
split: true,
layout: 'accordion',
activeItem: 0,
items: [
{
xtype: 'panel',
title: 'panel1',
layout: 'column',
width: 180,
items: [
{
xtype: 'button',
text: 'Button1',
scale: 'large'
},
{
xtype: 'button',
text: 'Button2',
scale: 'large'
},
{
xtype: 'button',
text: 'Button3',
scale: 'large'
},
{
xtype: 'button',
text: 'Button4',
scale: 'large'
},
{
xtype: 'button',
text: 'Button5',
scale: 'large'
},
{
xtype: 'button',
text: 'Button6',
scale: 'large'
}
]
},
{
xtype: 'panel',
title: 'panel2'
},
{
xtype: 'panel',
title: 'panel3'
}
]
},
{
xtype: 'panel',
title: 'east',
region: 'center'
},
{
xtype: 'panel',
title: 'south',
region: 'south'
}
];
MyViewportUi.superclass.initComponent.call(this);
}
});
一個基本的框架就產生了，而問題也隨之而來。最主要的問題是IE和FF顯示不一樣。應該說FF顯示很正常，按鍵根據導航欄的大小，改變每一行顯示的數量；
而IE呢，在第一次導航欄寬帶變大的時候，一切正常；而當導航欄寬度縮小的時候，原來每行的按鍵數卻并不變。想想這Ext都3.2了，不會還有這么腦殘的bug吧；
google了下，國內似乎對這個問題也沒有什么討論的；于是直接去官網的論壇問。
最初別人的提議是，更改westPanel的屬性
layout: {
type: 'accordion',
autoWidth: false
}
等于禁止westPanel的子欄目自動變化寬度，試了如果westPanel的子欄目只有一個工作正常，但是如果多個的話，又悲劇了～
因為每次只有1個子欄目的寬度在變化，所以產生這個問題也不足為奇了。
最后某個網友提供了一個自己寫的補丁，問題解決了。
Ext.layout.AccordionPatch = Ext.extend(Ext.layout.Accordion, {
inactiveItems: [],//ADDED
// private
onLayout : function(ct, target){//ADDED
Ext.layout.AccordionPatch.superclass.onLayout.call(this, ct, target);
if(this.autoWidth === false) {
for(var i = 0; i < this.inactiveItems.length; i++) {
var item = this.inactiveItems[i];
item.setSize(target.getStyleSize());
}
}
},
// private
beforeExpand : function(p, anim){//MODFIED
var ai = this.activeItem;
if(ai){
if(this.sequence){
delete this.activeItem;
ai.collapse({callback:function(){
p.expand(anim || true);
}, scope: this});
return false;
}else{
ai.collapse(this.animate);
if(this.autoWidth === false && this.inactiveItems.indexOf(ai) == -1)//*****
this.inactiveItems.push(ai);//*****
}
}
this.activeItem = p;
if(this.activeOnTop){
p.el.dom.parentNode.insertBefore(p.el.dom, p.el.dom.parentNode.firstChild);
}
if(this.autoWidth === false && this.inactiveItems.indexOf(this.activeItem) != -1)//*****
this.inactiveItems.remove(this.activeItem);//*****
this.layout();
}
});
Ext.Container.LAYOUTS['accordionpatch'] = Ext.layout.AccordionPatch;
配合補丁，westPanel的屬性也要有相應的變化
layout: {
type: 'accordionpatch',
autoWidth: false
}