border佈局如何動態替換其中一塊
當我們使用容器的border佈局時，有時候會需要動態的改變north，west，east，south，center等某一塊的內容，而事實上extjs不支持border佈局移除某一塊的內容，用container的add
remove等方法是沒有用的。而我們又確實需要動態替換某一塊的內容，如點擊一個按鈕改變內容。borderLayout類中有如下說明：
# Any container using the BorderLayout must have a child item with region:'center'. The child item in the center region will always be resized to fill the remaining space not used by the other regions in the layout.（任何使用border佈局的容器都必須有一個center區域，你不用指定center區域的高和寬，它會根據其他區域的佔用情況自動 剩餘區域）
# Any child items with a region of west or east must have width defined (an integer representing the number of pixels that the region should take up).（west和east區域必須指定其寬度，以像素爲單位）
# Any child items with a region of north or south must have height defined.（north和south區域必須指定其高度，以像素爲單位）
# The regions of a BorderLayout are fixed at render time and thereafter, its child Components may not be removed or added. To add/remove Components within a BorderLayout, have them wrapped by an additional Container which is directly managed by the BorderLayout. If the region is to be collapsible, the Container used directly by the BorderLayout manager should be a Panel. In the following example a Container (an Ext.Panel) is added to the west region（當border佈局的容器被渲染後，它的子組件將不能被增加和移除。想要移除以border佈局的容器的子組件，必須在外面增加一層不以border佈局的容器panel）。
如果要改變下面某個items是做不到的，border佈局將阻止這種行爲。
var myBorderPanel = new Ext.Panel({
renderTo: document.body,
width: 700,
height: 500,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'South Region is resizable',
region: 'south', // position for region
height: 100,
split: true, // enable resizing
minSize: 75, // defaults to 50
maxSize: 150,
margins: '0 5 5 5'
},{
// xtype: 'panel' implied by default
title: 'West Region is collapsible',
region:'west',
margins: '5 0 0 5',
width: 200,
collapsible: true, // make collapsible
cmargins: '5 5 0 5', // adjust top margin when collapsed
id: 'west-region-container',
layout: 'fit',
unstyled: true
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'container',
layout: 'fit',
margins: '5 5 0 0'
}]
});
然而下面的做法是可行的,我們要移除紅色部分，然後加上一個綠色部分：
var addedPanel = new Ext.panel({title:"添加的面板"});
var myBorderPanel = new Ext.Panel({
renderTo: document.body,
width: 700,
height: 500,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'South Region is resizable',
region: 'south', // position for region
height: 100,
split: true, // enable resizing
minSize: 75, // defaults to 50
maxSize: 150,
margins: '0 5 5 5'
},{
// xtype: 'panel' implied by default
title: 'West Region is collapsible',
region:'west',
margins: '5 0 0 5',
width: 200,
collapsible: true, // make collapsible
cmargins: '5 5 0 5', // adjust top margin when collapsed
id: 'west-region-container',
layout: 'fit',
unstyled: true,
items:[{xtype:"panel",
title:"面板1"},
{xtype:"panel",
title:"面板2"}
]
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'container',
layout: 'fit',
margins: '5 5 0 0'
}]
});
採用如下大代碼移除和添加：
wrc = Ext.getCmp('west-region-container');
wrc.removeAll();
wrc.add(addedPanel);
wrc.doLayout();
