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()

          });

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：组件在容器的右边

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：组件在容器的右边