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:组件在容器的右边
posted @ 2013-04-27 18:02  赵雪丹  阅读(381)  评论(0编辑  收藏