浅谈ExtJS的布局

ExtJs的最大特性之一就是可用简单的方法来进行布局。我们可通过合适的类来定义固定布局或非固定布局。比如，我们来为容器内的子组件设置布局时，如没有定义布局，则缺省使用auto布局。auto布局是将子组件在容器内一个接一个的来显示的。
ExtJs中可以用很多布局来安排组件，比如：accordions,cards,columns,table等。
一些常用的布局有：

• 边界布局
• 适应布局
• 卡片布局
• 手风琴布局
• 锚定布局

边界布局

边界布局(border) 将容器空间分成了5个区域：north,south,west,east和center。可以将子组件放在任意区域，但是必须要使用center区域。

Ext.onReady(function(){ 
    Ext.create('Ext.panel.Panel', { 
        width: 600, 
        height: 400, 
        title: 'Border Layout', 
        layout: 'border', //指定为边界布局
        items: [{ 
            xtype: 'panel', 
            title: '南区', 
            region: 'south', // region 
            height: 100
        },{ 
           xtype: 'panel', 
           title: '西区', 
           region:'west', // region 
           width: 200, 
          collapsible: true, 
          layout: 'fit'
      },{ 
        title: '中间区域', 
        region: 'center', 
        layout: 'fit', 
        html:'中间区' 
    }], 
   renderTo: Ext.getBody() 
  }); 
});   

适应布局

适应布局(fit)一般用于容器内只有一个组件时。这样组件会占用容器的所有可用空间，当容器改变大小时，组件会跟着容器来适应新的尺寸大小。
如下代码：

Ext.onReady(function(){ 
    var win = Ext.create("Ext.window.Window",{ 
        title: "我的窗体", 
        width: 200, 
        height: 200,
        layout: "fit", 
        defaults: { 
            xtype: "panel", 
            height: 60, 
            border: false 
       }, 
      items: [ 
          {title: "Menu", html: "主菜单"}, 
          {title: "Content", html: "主内容!"} 
      ] 
   }); 
   win.show(); 
});

卡片布局

手风琴布局

锚定布局