做web开发的朋友们都知道，用html标签中的表格元素table标签，这里的Column布局从字面意思我们就知道就是列布局，跟我们的table标签的效果有些类似，可以将元素按照表格是行列形式展现。 例如我一个panel中还有两个子panel现在想要左侧显示一个右侧显示一个怎么办？这是可以选择Column将父Panel分为两列，左侧一个右侧一个
工具/原料
1
extjs封装包
2
电脑
方法/步骤
1
Column布局的特点 在Column布局下，子元素的位置可以通过设置columnWidth来调节，其值是“1”时表示当前子元素占用本行的全部位置空间，而占用部分时columnWidthd的值则为“.1”、“.2”等，这两个值分别表示占用10%、20%。下面我们看看总体效果图
2
Column布局的一个实例 上面已经给出了column布局的图，这里我们给出次简单应用实例代码如下：var pnSub1=new Ext.Panel({ height:300, columnWidth:.3, html:'这是子panle1' }); var pnSub2=new Ext.Panel({ height:300, columnWidth:.7, html:'这是子panle2' }); var pn=new Ext.Panel({ id:'pn', title:'父Panel', renderTo:'divPanel', width:800, height:300, layout:'column', items:[ pnSub1, pnSub2] });
3
colLumn布局的设计思路 1）column布局的设计思路与table效果类似，所以适用于表单设计，表格式布局需求 2）还可以用于位置定位比较困难的一些地方，因为此种布局可以将子元素很容易的按比例放在同一行
注意事项
本文纯属原创，转载请注明出处
下一篇：美国MSE硕士留学申请经验 .