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
}