2012/7/26Extjs学习随笔
8.所谓布局就是指容器组建中子元素的分布、排列组合方式。Ext的所有容器组件都支持布局操作、每一个容器都会有一个对应的布局、布局负责管理容器组件中子元素的排列、组合及渲染方式等。
Extjs的布局基类为Ext.layout.ContainerLayout，其他布局都是继承该类。Extjs的容器组件包含一个layout及LayoutConfig配置属性，这两个属性用来指定容器使用的布局及布局的详细配置信息。如果没有指定容器组件的layout则的默认使用ContainerLayout作为布局，该布局只是简单的把元素放到容器中，有的布局要layoutConfig配置，有的则不需要layoutConfig配置。看代码：
<body>
<div id="hello"></div>
<script>
Ext.onReady(function(){
new Ext.Panel(
{
renderTo:'hello',
layout:'column',
width:200,
height:200,
items:[{
columnWidth:.5,
title:'面板1'
},{
columnWidth:.5,
title:'面板2'
}]
}
);
});
</script>
</body>
在上面的代码中，我们创建了一个面板Panel.Panel是一个容器组件，我们使用layout指定该面板使用列布局。每个面板都指定了组件的宽度。为50%。Ext中一些容器组件都已经指定所使用的布局，比如TabPanel使用Card布局(向导式对话框经常使用此布局)、FormPanel使用form布局，GridPanel中的表格使用column布局等。我们在使用这些组件的时候，不能再给这些容器组件指定额外的布局。
