Ext常用布局处理

Ext可供选择的布局方式较多，常用的布局就几种，下面指出使用这些布局需要特别注意的地方

平行分列布局
      在表单使用平行分列布局时，不能在表单中直接使用defaultType来指定默认的xtype了，否则会影响布局结果。
自适应布局
      使用了布局fit的子组件只能放一个组件，如果放置了多个组件，只有第一个有效。
border布局

      center部分不能缺少，它的区域由其他4个部分决定，其中北南2个部分只能设置高度，东西2个部门只能设置宽度；

      使用split:true属性控制拖放；

      使用collapsible:true控制折叠与展开功能（可以设置最大最小的范围minSize,maxSize），必须设置title，才能显示折叠按钮；

      可以为东西部分设置高度，但不能是autoHeight:true。
accordition布局

     必须设置title属性，否则报错
column布局

      使用column布局：先计算设置了宽度和默认宽度的值，剩下的按照比例计算，比例一定要等于1，否则难以实现预期的效果。

Table布局

    主要使用了参数 columns和rowspan，colspan来完成，可参考的代码如下：

var viewport = new Ext.Viewport({ layout:'fit', items:[{ title: 'Table Layout', layout:'table', defaults: { bodyStyle:'padding:20px' }, layoutConfig: { columns: 3 }, items: [{ html: '<p>Cell A content</p>', rowspan: 1 },{ html: '<p>Cell B content</p>', colspan: 1 },{ html: '<p>Cell C content</p>' },{ html: '<p>Cell D content</p>' }] }] });

 

对于有些布局需要填写空的盒子，可参考的代码例子

 

 

{ xtype:'box', name:'test', height:9, width:165 }

 

另外在form布局中，fieldset配置项: collapsible:true //控制信息的展开与伸缩