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',
   		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布局等。我们在使用这些组件的时候,不能再给这些容器组件指定额外的布局。

原文地址:https://www.cnblogs.com/howlaa/p/2609305.html