Ext Js 布局（二）

所有的布局都是从Ext.Container开始的，常用的布局：对页面整体布局Ext.Viewport，使用Ext.Panel和Ext.Window进行各种嵌套布局，使用Ext.form.FieldSet和Ext.form.FormPaneL对表单进行布局。
所有的布局类都有一个共同的超类：Ext.layout.ContainerLayout。
 
1、    最简单的布局方式：Ext.layout.FitLayout
这是包含单个项布局的基类，这种布局会在容器上自动铺开以填充整个容器。
var panel = new Ext.Viewport({
                layout: 'fit',
                items:[{
                    title: 'ddd',
                    html: 'dddd'
                }]
});
2、Ext.layout.BorderLayout,将整个布局分成了东、南、西、北、中。BorderLayout具有固定性，渲染之后就不会任意变动或改变格局。中央区域（center region）在BorderLayout设定中不可或缺。假使没有其它的区域，中央布局便会就是该布局的全部区域。
new Ext.Viewport({
              layout:'border',
              items: [{
                  title: '南部面板South Panel',
                  region: 'south',
                  height: 100,
                  margins: '0 5 5 5'
              },{
                  title: '西部面板West Panel',
                  region:'west',
                  margins: '5 0 0 5',
                  cmargins: '5 5 0 5',
                  split: true,  // 自行拖放改变区域大小
                  collapsible: true, // 区域折叠功能
                  width: 200
              },{
                  title: '主面板Main Content',
                  region:'center',
                  margins: '5 5 0 0'
              }]
       });
   3、Ext.layout.AccordionLayout。伸缩菜单布局
         {
                  title: '西部面板West Panel',
                  region: 'west',
                  layout: 'accordion',
                  layoutConfig: {
                    // 单击标题就可以折叠面吧，false就只能单击右边的图标
                      titleCollapse: true,                       
animate: true,  // 展开或者折叠时，是否使用动画效果
                       activeOnTop: false // 展开或者折叠后子面板顺序不改变
                  },
                  items: [{
                    title: 'Panel 1',
                    html: '<p>Panel content!</p>'
                  },{
                    title: 'Panel 2',
                    html: '<p>Panel content!</p>'
                  },{
                    title: 'Panel 3',
                    html: '<p>Panel content!</p>'
                  }],
                  margins: '5 0 0 5',
                  cmargins: '5 5 0 5',
                  split: true,  // 自行拖放改变区域大小
                  collapsible: true, // 区域折叠功能
                  width: 200
     }
     4、Ext.layout.CardLayout
            Ext.layout.AnchorLayout
        Ext.layout.AbsoluteLayout
     5、Ext.layout.FormLayout。Ext.form.FormPanel使用它做默认的布局方式
     6、分列式布局Ext.layout.ColumnLayout
        new Ext.Viewport({
               title: '列布局 - 百分比Only',
            layout:'column',
            items: [{
                title: '列一',
                columnWidth: .25
            },{
                title: '列二',
                columnWidth: .6
            },{
                title: '列三',
                columnWidth: .15
            }]
                 
        });
    7、Ext.layout.TableLayout
    // 以下代码会生成两行三列的表格。基本的布局是：This code will generate a layout table that is 3 columns by 2 rows
        // with some spanning included.  The basic layout will be:
        // +--------+-----------------+
        // |   A    |   B             |
        // |        |--------+--------|
        // |        |   C    |   D    |
        // +--------+--------+--------+
        var table = new Ext.Panel({
            title: 'Table Layout',
            layout:'table',
            defaults: {
                // 对每一个子面板都有效applied to each contained panel
                bodyStyle:'padding:20px'
            },
            layoutConfig: {
                // 这里指定总列数The total column count must be specified here
                columns: 3
            },
            items: [{
                html: '<p>Cell A content</p>',
                rowspan: 2
            },{
                html: '<p>Cell B content</p>',
                colspan: 2
            },{
                html: '<p>Cell C content</p>',
                cellCls: 'highlight'
            },{
                html: '<p>Cell D content</p>'
            }]
}）；