EXT的Border跟Column布局

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}] });});

查看更多 下一篇