ext布局【DOC精选】.docxVIP

所谓布局就是指容器组件中子元素的分布、排列组合方式。Ext的所有容器组件都支持而局操作，每一个容器都会有一个对应的布局，布局负责管理容器组件中子元素的排列、组合及渲染方式等。??????? ExtJS的布局基类为Ext.layout.ContainerLayout，其它布局都是继承该类。ExtJS的容器组件包含一个layout及layoutConfig配置属性，这两个属性用来指定容器使用的布局及布局的详细配置信息，如果没有指定容器组件的layout则默认会使用ContainerLayout作为布局，该布局只是简单的把元素放到容器中，有的布局需要layoutConfig配置，有的则不需要layoutConfig配置。看代码：Ext.onReady(function(){ new Ext.Panel({ renderTo:hello, width:400, height:200, layout:column, items:[{columnWidth:.5, title:面板1}, {columnWidth:.5, title:面板2}] }); }); ??? 上面的代码我们创建了一个面板Panel，Panle是一个容器组件，我们使用layout指定该面板使用Column布局。该面板的子元素是两个面板，这两个面板都包含了一个与列布局相关的配置参数属性columnWidth，他们的值都是0.5，也就是每一个面板占一半的宽度。执行上面的程序生成如下图所示的结果：??????? Ext中的一些容器组件都已经指定所使用的布局，比如TabPanel使用card布局、FormPanel使用form布局，GridPanel中的表格使用column布局等，我们在使用这些组件的时候，不能给这些容器组件再指定另外的布局。??????? ExtJS2.0一共包含十种布局，常用的布局有border、column、fit、form、card、tabel等布局，下面我们分别对这几种布局作简单的介绍。《ExtJS2.0实用简明教程》之Border区域布局Border布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。看下面的代码：Ext.onReady(function(){ new Ext.Viewport({ layout:border, items:[{region:north, height:50, title:顶部面板}, {region:south, height:50, title:底部面板}, {region:center, title:中央面板}, {region:west, width:100, title:左边面板}, {region:east, width:100, title:右边面板} ] }); }); ??? 执行上面的代码将会在页面中输出包含上下左右中五个区域的面板，如下图所示：《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,columnWi