Border布局作為Ext中整個(gè)框架的布局應(yīng)該說(shuō)很普遍，一般North放一個(gè)應(yīng)用的Logo bar,West一般會(huì)作為導(dǎo)航欄的放置位置；
而Center(East)往往作為整個(gè)應(yīng)用的核心部分，而South位置也往往放置一些應(yīng)用的版權(quán)等信息。
而導(dǎo)航欄一般會(huì)采用的呈現(xiàn)方式一般無(wú)非是Treepanel或者根據(jù)模塊放置多個(gè)Panel，而多數(shù)會(huì)采用的布局方式，往往是
Accordion的布局。比如像這樣(偷個(gè)懶直接用設(shè)計(jì)器寫(xiě)的)：
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);
}
});
一個(gè)基本的框架就產(chǎn)生了，而問(wèn)題也隨之而來(lái)。最主要的問(wèn)題是IE和FF顯示不一樣。應(yīng)該說(shuō)FF顯示很正常，按鍵根據(jù)導(dǎo)航欄的大小，改變每一行顯示的數(shù)量；
而IE呢，在第一次導(dǎo)航欄寬帶變大的時(shí)候，一切正常；而當(dāng)導(dǎo)航欄寬度縮小的時(shí)候，原來(lái)每行的按鍵數(shù)卻并不變。想想這Ext都3.2了，不會(huì)還有這么腦殘的bug吧；
google了下，國(guó)內(nèi)似乎對(duì)這個(gè)問(wèn)題也沒(méi)有什么討論的；于是直接去官網(wǎng)的論壇問(wèn)。
最初別人的提議是，更改westPanel的屬性
layout: {
type: 'accordion',
autoWidth: false
}
等于禁止westPanel的子欄目自動(dòng)變化寬度，試了如果westPanel的子欄目只有一個(gè)工作正常，但是如果多個(gè)的話(huà)，又悲劇了～
因?yàn)槊看沃挥?個(gè)子欄目的寬度在變化，所以產(chǎn)生這個(gè)問(wèn)題也不足為奇了。
最后某個(gè)網(wǎng)友提供了一個(gè)自己寫(xiě)的補(bǔ)丁，問(wèn)題解決了。
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;
配合補(bǔ)丁，westPanel的屬性也要有相應(yīng)的變化
layout: {
type: 'accordionpatch',
autoWidth: false
}