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 //控制信息的展開與伸縮