ExtJs学习笔记(14)_Column布局

Column布局有点象传统html中的table的td，但是也有不同的地方:

 

先看下代码

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><scripttype="text/javascript">
Ext.onReady(function(){
varwin=newExt.Window({
title:"ColumnLayout",
height:300,
width:400,
plain:true,
layout:'column',
items:[{
title:"width=50%",
columnWidth:0.5,
html:"width=(容器宽度-容器内其它组件固定宽度)*50%",
height:200
},
{
title:"width=250px",
width:200,
height:100,
html:"固定宽度为250px"
}
]
});
win.show();
});
</script>

效果图:

对于一下:

<tr>

<td width="50%"></td>

<td width="30px"><td>

<td></td>

</tr>

在table中,这里第一列会占到整个行的50%的宽度，而在ExtJs的column布局中，百分比是指(容器宽度-有固定width值组件的宽度)后，再乘相应百分比得到的宽度

欢迎加入:http://www.itpob.cn/bbs