columnWidth表示使用百分比的形式指定列宽度,而width则是使用绝对象素的方式指定列宽度,在实际应用中可以混合使用两种方式。看下面的代码:
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"容器组件",
layout:"column",
500,
height:100,
items:[{title:"列1",100},
{title:"列2",200},
{title:"列3",100},
{title:"列4"}
]
}
);
});
上面的代码在容器组件中放入了四个元素,在容器组件中形成4列,列的宽度分别为100,200,100及剩余宽度,执行结果如下图所示。

也可使用columnWidth来定义子元素所占的列宽度,看下面的代码:
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"容器组件",
layout:"column",
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",
500,
height:100,
items:[{title:"列1",200},
{title:"列2",columnWidth:.3},
{title:"列3",columnWidth:.3},
{title:"列4",columnWidth:.4}
]
}
);
});
执行上面的代码将会生成如下图所示的结果:
