ExtJS 3.2 學習筆記（2）----組件佈局

   

    ExtJS的佈局有：FitLayout，BoardLayout，Accordion，CardLayout，AnchorLayout，AbsoluteLayout，FormLayout，ColumnLayout，TableLayout等。。

   在實際項目中經常使用的有：FitLayout，BoardLayout，Accordion，CardLayout，AnchorLayout，  ColumnLayout等

  

一：FitLayout 佈局  ---自適應佈局

 要使用佈局的時候 經過配置組件的layout參數 來決定使用哪一種佈局：看一個代碼：

var viewport=new Ext.viewport({
    layout:'fit',
    items:[..。。組件對象....]

});

上面代碼就配置了 瀏覽器窗口viewport按照自適應的方式來佈局。也就是說當瀏覽器整個窗口變化的時候，窗口裏面的組件（items裏面的組件）會自動適應外部頁面的大小變化。這也是最簡單的佈局，通常經常使用在窗口內只容納一個組件面板的時候。

  若上述代碼中items裏頭包含一個表格組件，那這個表格組件就會自動填充整個窗口。要注意的是若是這個時候表格組件內部設置了autoHeight：true，那麼自動填充就失去了效果，就會出現常見到的表格列表沒法充滿整個面板的現象。

其它組件也同樣，當採用fit佈局的時候 就要避免讓extjs從新計算組件高度，而是採用fit自適應。

 還有一點就是採用fitlayout佈局每次只能使用一個子組件，在上面中若是items中有多個子組件的話，那麼ext只會渲染出第一個組件，由於第一個組件就佈滿了整個窗口。顯然 FitLayout佈局沒法用來做爲多模塊複雜的佈局。

二，邊框佈局 BoradLayout

    邊框佈局是咱們最經常使用的，直接看代碼：

var viewport=new Ext.ViewPort({

    layout:'border',
    items:[
      {region:'north',html:'north'},
      {region:'south',html:'south'},
       {region:'east',html:'east'},
       {region:'west',html:'west'},
        {region:'center',html:'center'}
      ]

});

效果以下：

  這就是咱們經常使用的邊框佈局，把頁面分紅幾個模塊，其中center的大小是其它4個模塊渲染後計算出來的，並且center這個模塊是不可缺乏的，不然js代碼將會報錯。接下來咱們能夠再對這五個模塊進行一些大小設置。

   除開center這個模塊外，其他幾個模塊均可以設置區域的大小，可是並非能夠設置全部的大小屬性：

  顯然：north和south只能設置高度height，west和east只能設置寬度witdh。緣由看圖理解就明白了哈。

      如下幾點：

     1，這裏的每一個模塊若是也設置autoHeight：true屬性，那麼就會破壞整個佈局，全部autoHeight：true在佈局方面是有不少缺點的哈。

    2，split屬性的使用，上面佈局中若是再west模塊中添加split：true，那麼west模塊就能夠手動拖動右邊框起到增長和減小模塊寬度的做用。其它模塊一樣適用。至於拖動範圍可使用minSize和maxSize來限定。

  3，子區域的展開和摺疊，若給模塊加上collapsible：true 和title：‘... ’，配置，那麼就加上了模塊的展開和摺疊功能了。須要注意的是，必須有title屬性後才能配置collapsible，由於collapsible的摺疊按鈕是呈如今title框上的。

  三，Accordion，伸縮菜單佈局

       使用過的extjs的朋友都知道，  菜單佈局是最經常使用的一個佈局之一，看代碼：

var viewport=new Ext.Viewport({

    layout:'border',
    items:[

         {
           region:'west',
           width:30,
           laout:'accordion',
           layoutConfig:{
           animate:true,
           titleCollapsible:true,
           activeOnTop:true
          },

          items:[
           {title:'菜單一',html:'菜單一'},
           {title:'菜單二',html:'菜單二'},
           {title:'菜單三',html:'菜單三'},
            {title:'菜單四',html:'菜單四'}

         ]

         },
        {
         region:'center',//不可缺乏
         html:'中間'
        }
      ]
});

 代碼中west模塊嵌套一個accordion佈局，效果以下：

   

上面代碼中：1，west模塊的items中的每一個title都是必須的，沒有配置title會報錯。

                 2，animate：true 設置展開時候使用動畫效果。

                  3，activeOntop：true 設置展開時候被展開的子面板始終放在最上面，默認爲false。

                   4，titleCollapsible：true  設置淡季標題框就能展開菜單，不然只能點擊‘+’ 和‘—’號來展開。爲                          了使用方便通常設置爲true。

四： AnchorLayout 可控制大小和位置的佈局

    這個佈局佈局經常使用，有三種配置方式看代碼：

    

var viewport=new Ext.Viewport({
         layout:'anchor',
         items:[
            { title:'panel1',
              html:'panel1' ,
              anchor:'50%  60%'   
              },
             {
               title:'panel2',
               html:'panel2',
               anchor:'70%'
              }
          ]
});

佈局簡單，配置anchor參數，第一個百分比表示寬度，第二個百分比表示高度  若是隻有一個百分比，那麼效果是:高度按auto來。

這種配置方式不少，這裏只講最經常使用的。