《ExtJS2.0实用简明教程》连载（4/30）——Column列布局

《ExtJS2.0实用简明教程》连载（4/30）——Column列布局<o:p></o:p>

作者：小雨     发表时间：2008-02-17 上一篇：Card布局 <o:p></o:p>

<o:p> </o:p>

<o:p></o:p>    Column列布局由Ext.layout.ColumnLayout类定义，名称为column。列布局把整个容器组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽度，而width则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。看下面的代码：<o:p></o:p> Ext.onReady(function(){ <o:p></o:p> <o:p> </o:p> new Ext.Panel({<o:p></o:p> <o:p> </o:p> renderTo:"hello",<o:p></o:p> <o:p> </o:p> title:"容器组件",<o:p></o:p> <o:p> </o:p> layout:"column",<o:p></o:p> <o:p> </o:p> width:500,<o:p></o:p> <o:p> </o:p> height:100,<o:p></o:p> <o:p> </o:p> items:[{title:"列1",width:100},<o:p></o:p> <o:p> </o:p> {title:"列2",width:200},<o:p></o:p> <o:p> </o:p> {title:"列3",width:100},<o:p></o:p> <o:p> </o:p> {title:"列4"}<o:p></o:p> <o:p> </o:p> ]<o:p></o:p> <o:p> </o:p> }<o:p></o:p> <o:p> </o:p> );<o:p></o:p> <o:p> </o:p> });<o:p></o:p>     上面的代码在容器组件中放入了四个元素，在容器组件中形成4列，列的宽度分别为100,200,100及剩余宽度，执行结果如下图所示。<o:p></o:p> <!----><!----><!----><o:p></o:p>         也可使用columnWidth来定义子元素所占的列宽度，看下面的代码：<o:p></o:p> Ext.onReady(function(){ <o:p></o:p> <o:p> </o:p> new Ext.Panel({<o:p></o:p> <o:p> </o:p> renderTo:"hello",<o:p></o:p> <o:p> </o:p> title:"容器组件",<o:p></o:p> <o:p> </o:p> layout:"column",<o:p></o:p> <o:p> </o:p> width:500,<o:p></o:p> <o:p> </o:p> height:100,<o:p></o:p> <o:p> </o:p> items:[{title:"列1",columnWidth:.2},<o:p></o:p> <o:p> </o:p> {title:"列2",columnWidth:.3},<o:p></o:p> <o:p> </o:p> {title:"列3",columnWidth:.3},<o:p></o:p> <o:p> </o:p> {title:"列4",columnWidth:.2}<o:p></o:p> <o:p> </o:p> ]<o:p></o:p> <o:p> </o:p> }<o:p></o:p> <o:p> </o:p> );<o:p></o:p> <o:p> </o:p> });<o:p></o:p>     注意columnWidth的总和应该为1，执行代码将生成如下图所示的内容：<o:p></o:p> <!----><!----><!----><o:p></o:p>         在实际应用中还可以混合使用，看下面的代码：<o:p></o:p> Ext.onReady(function(){ <o:p></o:p> <o:p> </o:p> new Ext.Panel({<o:p></o:p> <o:p> </o:p> renderTo:"hello",<o:p></o:p> <o:p> </o:p> title:"容器组件",<o:p></o:p> <o:p> </o:p> layout:"column",<o:p></o:p> <o:p> </o:p> width:500,<o:p></o:p> <o:p> </o:p> height:100,<o:p></o:p> <o:p> </o:p> items:[{title:"列1",width:200},<o:p></o:p> <o:p> </o:p> {title:"列2",columnWidth:.3},<o:p></o:p> <o:p> </o:p> {title:"列3",columnWidth:.3},<o:p></o:p> <o:p> </o:p> {title:"列4",columnWidth:.4}<o:p></o:p> <o:p> </o:p> ]<o:p></o:p> <o:p> </o:p> }<o:p></o:p> <o:p> </o:p> );<o:p></o:p> <o:p> </o:p> });<o:p></o:p>     执行上面的代码将会生成如下图所示的结果：<o:p></o:p> <!----><!----><!----><o:p></o:p>

<o:p> </o:p>（版权声明：本文版权归EasyJF开源社区的冷雨所有，受法律保护，可以在互联网上进行转载，转载必须保留作者版权声明及链接；未经本人书面许可，不得把本人Blog上的文章用于出版、发行或其它商业用途。）

上一篇： Card布局