EXT的Border和Column布局

Border 布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，
分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素
所在的位置，Border布局会自动把子元素放到布局指定的位置。看下面的代码：

Ext.onReady(function(){
new Ext.Viewport({
layout:"border",
items:[{region:"north",
height:50,
title:"顶部面板"},
{region:"south",
height:50,
title:"底部面板"},
{region:"center",
title:"中央面板"},
{region:"west",
width:100,
title:"左边面板"},
{region:"east",
width:100,
title:"右边面板"}
]
});
});

Column 列布局由Ext.layout.ColumnLayout 类定义，名称为column。列布局把整个容器
组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth
或width 来指定子元素所占的列宽度。columnWidth 表示使用百分比的形式指定列宽度，而
width 则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。看下面
的代码：

Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"容器组件",
layout:"column",
width:500,
height:100,
items:[{title:"列1",width:100},
{title:"列2",width:200},
{title:"列3",width:100},
{title:"列4"}
]
}
);
});

上面的代码在容器组件中放入了四个元素，在容器组件中形成4 列，列的宽度分别为
100,200,100 及剩余宽度。
也可使用columnWidth 来定义子元素所占的列宽度，看下面的代码：

Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"容器组件",
layout:"column",
width:500,
height:100,
items:[{title:"列1",columnWidth:.2},
{title:"列2",columnWidth:.3},
{title:"列3",columnWidth:.3},
{title:"列4",columnWidth:.2}
]
}
);
});

注意columnWidth 的总和应该为1。
在实际应用中还可以混合使用，看下面的代码：

Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"容器组件",
layout:"column",
width:500,
height:100,
items:[{title:"列1",width:200},
{title:"列2",columnWidth:.3},
{title:"列3",columnWidth:.3},
title:"列4",columnWidth:.4}
] }
);
});