做web开发的朋友们都知道，用html标签中的表格元素table标签，这里的Column布局从字面意思我们就知道就是列布局，跟我们的table标签的效果有些类似，可以将元素按照表格是行列形式展现。 例如我一个panel中还有两个子panel现在想要左侧显示一个右侧显示一个怎么办？这是可以选择Column将父Panel分为两列，左侧一个右侧一个工具/原料morenbsp;extjs封装包nbsp;电脑方法/步骤1/3分步阅读

Column布局的特点

在Column布局下，子元素的位置可以通过设置columnWidth来调节，其值是“1”时表示当前子元素占用本行的全部位置空间，而占用部分时columnWidthd的值则为“.1”、“.2”等，这两个值分别表示占用10%、20%。下面我们看看总体效果图

2/3

Column布局的一个实例

上面已经给出了column布局的图，这里我们给出次简单应用实例代码如下：

varpnSub1=newExt.Panel({

height:300,

columnWidth:.3,

html:这是子panle1

});

varpnSub2=newExt.Panel({

height:300,

columnWidth:.7,

html:这是子panle2

}); varpn=newExt.Panel({

id:pn,

title:父Panel,

renderTo:divPanel,

width:800,

height:300,

layout:column,

items: });

3/3

colLumn布局的设计思路

1）column布局的设计思路与table效果类似，所以适用于表单设计，表格式布局需求

2）还可以用于位置定位比较困难的一些地方，因为此种布局可以将子元素很容易的按比例放在同一行

注意事项

nbsp;本文纯属原创，转载请注明出处

extjs