ExtJS2.0适用简明教程》之Column列布局
日期：2014-05-16 浏览次数：20369 次
ExtJS2.0实用简明教程》之Column列布局
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}
]
}
);
});
??? 执行上面的代码将会生成如下图所示的结果：
1 楼
heroyanglei
2010-09-03
3Q楼主，但是我还想知道layout:column被看成一个容器，但是该容器的大小却不能定义为父容器的百分比。不能自适应浏览器。以至于里面的子节点即使设置成了百分比，也是不会随浏览器的大小改变而改变！
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
