Column列布局由Ext.layout.ColumnLayout類(lèi)定義，名稱(chēng)為column。列布局把整個(gè)容器組件看成一列，然后往里面放入子元素的時(shí)候，可以通過(guò)在子元素中指定使用columnWidth或width來(lái)指定子元素所占的列寬度。

???????? columnWidth表示使用百分比的形式指定列寬度，而width則是使用絕對(duì)象素的方式指定列寬度，在實(shí)際應(yīng)用中可以混合使用兩種方式。看下面的代碼：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"}]});});

??? 上面的代碼在容器組件中放入了四個(gè)元素，在容器組件中形成4列，列的寬度分別為100,200,100及剩余寬度，執(zhí)行結(jié)果如下圖所示。

??????? 也可使用columnWidth來(lái)定義子元素所占的列寬度，看下面的代碼：

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的總和應(yīng)該為1，執(zhí)行代碼將生成如下圖所示的內(nèi)容：

??????? 在實(shí)際應(yīng)用中還可以混合使用，看下面的代碼：

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

??? 執(zhí)行上面的代碼將會(huì)生成如下圖所示的結(jié)果：

轉(zhuǎn)載于:https://www.cnblogs.com/licheng/archive/2008/10/23/1317305.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。