Extjs4布局layout

1.Layouts

  1)Ext.layout.container.Border       layout : 'border' 表示我們使用了Border布局，這種布局方式稱為邊界布局，它将頁面分隔成為:west,east,south,north,center這五個部分，我們在items裡面使用region參數為它組織定義具體的位置。      north和south部分隻能設定高度（height），west和east部分隻能設定寬度（width）。north south west east區域變大了，center區域就變小了。      參數 split:true 可以拖動除了center四個區域的大小。      參數 collapsible:true 激活折疊功能，前面title必須設定，因為折疊按鈕是出現标題部分 注意：center 區域是必須使用的，而且center 區域不允許折疊。 Ext.create('Ext.panel.Panel', {                width: 500,               height: 400,               layout:  'border',               items: [{                   title:  'South Region is resizable' ,                   region:  'south' ,      // position for region                   xtype:  'panel' ,                   height: 100,                   split:  true ,          // enable resizing                   margins:  '0 5 5 5'               },{                    // xtype: 'panel' implied by default                   title:  'West Region is collapsible' ,                   region: 'west' ,                   xtype:  'panel' ,                   margins:  '5 0 0 5' ,                   width: 200,                   collapsible:  true ,    // make collapsible                   id:  'west-region-container' ,                   layout:  'fit'               },{                   title:  'Center Region' ,                   region:  'east' ,      // center region is required, no width/height specified                   xtype:  'panel' ,                   layout:  'fit' ,                   margins:  '5 5 0 0'               }],               renderTo: Ext.getBody()           });

2)Ext.layout.container.Fit      layout:'fit' 表示我們引用了fit布局。當客戶要求一個視窗裡顯示一個Grid表格，可以讓它自動适應窗體的大小的變化，窗體變大時候Grid表格也變大，窗體變小的時候也變小。 注意：layout : 'fit' 元件的items隻能放一個元件，如果放了多個元件，那麼也隻有一個子元件會起作用。 Ext.define( 'ParentWindow' ,{                 extend :  'Ext.window.Window' ,                 title :  'ParentWindow' ,                 width :  '300px' ,                 height :  '200px' ,                 layout :  'fit',                 items : {                      xtype :  'gridpanel' ,                      store: store,                    stateful:  true ,                    layout :  'fit' ,                    columns: [                        {                            text     :  'Company' ,                            flex     : 1,                            sortable :  false ,                            dataIndex:  'company'                        },                        {                            text     :  'Price' ,                            width    : 75,                            sortable :  true ,                            renderer :  'usMoney' ,                            dataIndex:  'price'                        },                        {                            text     :  'Change' ,                            width    : 75,                            sortable :  true ,                            dataIndex:  'change'                        },                        {                            text     :  '% Change' ,                            width    : 75,                            sortable :  true ,                                                       dataIndex:  'pctChange'                        },                        {                            text     :  'Last Updated' ,                            width    : 85,                            sortable :  true ,                            renderer : Ext.util.Format.dateRenderer( 'm/d/Y' ),                            dataIndex:  'lastChange'                        }]                 }            });

3）Ext.layout.container.Accordion      layout : ' accordion' 代表使用了accordion布局方式。 var  accrodion = Ext.create( 'Ext.panel.Panel' , {                               layout: 'accordion',                defaults: {                    bodyStyle:  'padding:15px'                },                layoutConfig: {                    titleCollapse:  true ,                    animate:  true ,                    activeOnTop:  false                },                items: [{                    title:  'Panel 1' ,                    html:  'Panel content!'                },{                    title:  'Panel 2' ,                    html:  'Panel content!'                },{                    title:  'Panel 3' ,                    html:  'Panel content!'                }],               

           });

4)Ext.layout.container.Card      layout : 'card' Card布局可以看做是一疊卡片，從上面看起來就像是一張卡片，我們可以把中間的卡片抽出來，放到最上面，可是每次隻能顯示一張卡片。 <script type="text/javascript">       var  navigate =  function (panel,direction){             var  layout = panel.getLayout();            layout[direction]();           Ext.getCmp( 'move-prev' ).setDisabled(!layout.getPrev());           Ext.getCmp( 'move-next' ).setDisabled(!layout.getNext());      }       var  cardPanel = Ext.create( 'Ext.panel.Panel' ,{          layout:  'card',          activeItem: 0,  // make sure the active item is set on the container config!          bodyStyle:  'padding:15px' ,          defaults: {               // applied to each contained panel              border:  false          },            bbar : [{                       id: 'move-prev' ,                       text :  '上一章' ,                       xtype :  'button' ,                       listeners : {                            'click'  :  function (btn){                      navigate(btn.up( 'panel' ), 'prev' );                           }                            }                                           },{                       id: 'move-next' ,                       text :  '下一章' ,                       xtype :  'button' ,                       listeners : {                            'click'  :  function (btn){                      navigate(btn.up( 'panel' ), 'next' );                           }                            }                    }],            items : [                     {                        id :  'card0' ,                        html :  '<h1>Welcome to card0!</h1>第一章：好好學習'                     },{                        id :  'card1' ,                        html :  '<h1>Welcome to card1!</h1>第二章：天天向上'                     },{                        id :  'card2' ,                        html :  '<h1>Welcome to card2!</h1>第三章：good good study'                     },{                        id :  'card3' ,                        html :  '<h1>Welcome to card3!</h1>第四章：天天'                     },{                        id :  'card4' ,                        html :  '<h1>Welcome to card4!</h1>第五章：頂頂頂'                     }                     ]      });      Ext.onReady( function (){            Ext.create( 'Ext.window.Window' ,{                 title :  'CardLayoutWindow' ,                 width :  '300px' ,                 height :  '200px' ,                 layout :  'fit' ,                 items : cardPanel            }).show();      }); </ script >

5）Ext.layout.container.Anchor      layout:'anchor'設定為anchor布局模式。在每一個panel中的items中有一個參數anchor，參數是一個字元串。      anchor: '75% 20%'，中間用一個空格隔開，空格前後是%的數字。第一個參數75%：意思是寬度設定為整體的75%；第二個參數20%：是設定高度為整體的20%。      anchor:'-300 -200' ，中間用一個空格隔開，空格前後是整數，第一個參數-300：表示距離右側的相對距離；第二個參數-200：表示距離底部的相對距離。       < script  type = "text/javascript" >      Ext.onReady( function (){            Ext.create( 'Ext.Panel' , {                width: 500,                height: 400,                title:  "AnchorLayout Panel" ,                layout:  'anchor',                renderTo: Ext.getBody(),                items: [{                    xtype:  'panel' ,                    title:  '75%寬度  20%高度' ,                    anchor:  '75% 20%'                },{                    xtype:  'panel' ,                    title:  'Offset -300 Width & -200 Height' ,                    anchor:  '-300 -200'                     },{                    xtype:  'panel' ,                    title:  'Mixed Offset and Percent' ,                    anchor:  '-250 20%'                }]            });      }); </ script >

6)Ext.layout.container.Absolute      layout:'absolute'。我們可以對每一個控件的位置進行控制。      x:設定x坐标；y:設定y坐标       var  alayout = Ext.create( 'Ext.form.Panel' , {          width: 300,          height: 275,          layout: 'absolute',                  defaultType:  'textfield' ,          items: [{              x: 10,              y: 10,              xtype: 'label' ,              text:  'Send To:'          },{              x: 80,              y: 10,              name:  'to' ,              anchor: '90%'    // anchor width by percentage          },{              x: 10,              y: 40,              xtype: 'label' ,              text:  'Subject:'          },{              x: 80,              y: 40,              name:  'subject' ,              anchor:  '90%'    // anchor width by percentage          },{              x:0,              y: 80,              xtype:  'textareafield' ,              name:  'msg' ,              anchor:  '100% 100%'    // anchor width and height          }]               });

7)Ext.layout.container.Column      layout:'column '：表格布局。      注意items 中  columnWidth 的數值必須是0~1之間的小數，它表示每個子元件在整體中所占的百分比。它們的總和應該是1，否則會出現沒有填滿的情況。       var  columnLayout = Ext.create( 'Ext.panel.Panel' , {          width: 350,          height: 250,          layout: 'column',          items: [{              title:  '表格Layout 1' ,              columnWidth: .25          },{              title:  '表格Layout 2' ,              columnWidth: .55          },{              title:  '表格Layout 3' ,              columnWidth: .20          }],          renderTo: Ext.getBody()      });

8)Ext.layout.container.Table      layout : 'table' 表格布局。table布局把頁面定義成一個表格包括行和列。它在生成代碼的時候就是生成了html代碼中的<table></table>标簽。             var  tableLayout = Ext.create( 'Ext.panel.Panel' ,{                 width: 300,              height: 150,                 layout : {                      type : 'table',                      columns : 3                 },                 defaults: {                   // applied to each contained panel                  bodyStyle: 'padding:20px'              },                 items: [{                  html:  'A table' ,                  rowspan: 2              },{                  html:  'B table' ,                  colspan: 2              },{                  html:  'C table' ,                  cellCls:  'highlight'              },{                  html:  'D table'              }]

           });

<tbody> <tr> <td id="" class="x-table-layout-cell " colspan="1" rowspan="2"> <div id="panel-1015" class="x-panel x-panel-default" role="presentation" style="height: 57px; width: 78px;"> <div id="ext-gen1025" class="x-panel-body x-panel-body-default x-panel-body-default" style="padding: 20px; left: 0px; top: 0px;">A table</div> </div> </td> <td id="" class="x-table-layout-cell " colspan="2" rowspan="1"> <div id="panel-1016" class="x-panel x-panel-default" role="presentation" style="height: 57px; width: 162px;"> <div id="ext-gen1029" class="x-panel-body x-panel-body-default x-panel-body-default" style="padding: 20px; left: 0px; top: 0px;">B table</div> </div> </td> </tr> <tr> <td id="" class="x-table-layout-cell highlight" colspan="1" rowspan="1"> <div id="panel-1017" class="x-panel x-panel-default" role="presentation" style="height: 57px; width: 81px;"> <div id="ext-gen1033" class="x-panel-body x-panel-body-default x-panel-body-default" style="padding: 20px; left: 0px; top: 0px;">C table</div> </div> </td> <td id="" class="x-table-layout-cell " colspan="1" rowspan="1"> <div id="panel-1018" class="x-panel x-panel-default" role="presentation" style="height: 57px; width: 81px;"> <div id="ext-gen1037" class="x-panel-body x-panel-body-default x-panel-body-default" style="padding: 20px; left: 0px; top: 0px;">D table</div> </div> </td> </tr> </tbody> </table>

9)Ext.layout.container.VBox 垂直布局

a)align：字元類型，訓示元件在容器内的對齊方式。有如下幾種屬性。

    1、left（預設）：排列于容器左側。

    2、center ：控件在容器水準居中。

    3、stretch：控件橫向拉伸至容器大小

    4、stretchmax:控件橫向拉伸，寬度為最寬控件的寬。

b)pack : 字元類型，訓示元件在容器的位置，有如下幾種屬性。

    1、start（預設）：元件在容器上邊

    2、center：元件在容器中間

    3、end：元件在容器的下邊

10)Ext.layout.container.HBox 水準布局

a)align：字元類型，訓示元件在容器内的對齊方式。有如下幾種屬性。

    1、top（預設）：排列于容器頂端。

    2、middle：垂直居中排列于容器中。

    3、stretch：垂直排列且拉伸義填補容器高度

    4、stretchmax:垂直拉伸，并且元件以最高高度的元件為準。

b)pack : 字元類型，訓示元件在容器的位置，有如下幾種屬性。

    1、start（預設）：元件在容器左邊

    2、center：元件在容器中間

    3、end：元件在容器的右邊