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

??? 執行上面的代碼將會生成如下圖所示的結果：

轉載于:https://www.cnblogs.com/licheng/archive/2008/10/23/1317305.html

總結

以上是生活随笔為你收集整理的ExtJS2.0实用简明教程 - Column列布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。