深入淺出ExtJS 第六章 布局

 6.1 布局的用途

6.1 布局的用途
  //決定把什么東西放到什么位置;
  var vieport = new Ext.Viewport({
    layout:'border',      //使用BorderLayout的布局方式(邊界布局);可以自動檢測瀏覽器的大小變化和自動調整布局中每個部分的大小;
    items:[{
      region:'north',     //指定組件的具體位置;
      height:40,
      html:'<h1>頂部</h1>'
    },{
      region:'west', 11       width:100,
      html:'<p>左側區域</p>'
    },{
      region:'center', 15       html:'主要內容'
    }]
  });
  //Ext的所有布局都是從Ext.Container開始的,Ext.Container的父類是Ext.BoxComponent;
  //Ext.BoxComponent是一個盒子組件,可以定義寬度/高度和位置等;
  
  //Ext.Container及其子類
  >.Ext.Container     //Ext.Container的子類都可以用layout對內部的items進行布局;
    >.Ext.Viewport    
    >.Ext.Panel       
      >.Ext.TabPanel
      >.Ext.Tip
      >.Ext.Window    　　　 
      >.Ext.form.FieldSet   
      >.Ext.form.FormPanel  
      >.Ext.tree.TreePanel
      >.Ext.grid.GridPanel
        >.Ext.grid.EditorGridPanel
        >.Ext.grid.PropertyGrid

  //所有布局類也有一個共同的超類Ext.layout.ContainerLayout
  //凡是該超類的子類都可以對Ext.Container及其子類進行布局定義;
  >.Ext.layout.ContainerLayout    //容器布局
    >.Ext.layout.AnchorLayout     //錨點布局
      >.Ext.layout.AbsoluteLayout //絕對定位布局
      >.Ext.layout.FormLayout     //表單布局
    >.Ext.layout.BorderLayout     //邊框布局
    >.Ext.layout.ColumnLayout     //分列布局
    >.Ext.layout.FitLayout        //自適應布局
      >.Ext.layout.Accordion      //折疊布局
      >.Ext.layout.CardLayout     //卡片布局
    >.Ext.layout.TableLayout      //表格布局

 

 6.2 最簡單的布局--FitLayout

6.2 最簡單的布局--FitLayout
  //自動適應頁面大小
  Ext.onReady(function(){
    var store = new Ext.data.ArrayStore({
      fields:['id','name','desc'],
      data:[['1','name1','desc1']]        //數據存儲器;
    });

    var grid = new Ext.grid.GridPanel({   //創建帶數據的表格;
      title:'grid',
      viewConfig:{forceFit:true},
      store:store,
      columns:[
        {header:'id',dataIndex:'id'},
        {header:'名稱',dataIndex:'name'},
        {header:'描述',dataIndex:'desc'}
      ],
      tbar:new Ext.Toolbar(['添加','修改','刪除']),
      bbar:new Ext.PagingToolbar({
        pageSize:15,
        store:store
      })
    });

    var viewport = new Ext.Viewport({
      layout:'fit',   //指向自適應布局;
      items:[grid]    //將表格引入布局;
    });
  });

 

 6.3 常用的邊框布局--BorderLayout

6.3 常用的邊框布局--BorderLayout
  //FitLayout每次只能使用一個子組件;而現實中我們使用最多的是Ext.layout.BorderLayout布局;
  var viewport = new Ext.Viewport({
    layout:'border',  //指向為BorderLayout布局;
    items:[
      {region:'north',html:'north',height:120}, //region:指定組件的位置;html:組件內容;
      {region:'south',html:'south',height:30},
      {region:'west',html:'west',width:40},
      {region:'east',html:'east',width:100},
      {region:'center',html:'center'}       　　//center的大小是其他4個部分設置好之后計算出來的;不可以省略;
    ]
  });

6.3.1 設置子區域的大小
  //可以直接設置north與south的高度和west與east的寬度;

6.3.2 使用split並限制它的的范圍
  //使用split參數,用戶可以自行拖放來改變某一個區域的大小;
  //使用minSize和maxSize將限制用戶拖放的范圍;
  var viewport = new Ext.Viewport({
    layout:'border',
    items:[
      {region:'north',html:'north',split:true},         //頂部可以上下拖動改變大小;
      {region:'west',html:'west',width:100,split:true,minSize:80,maxSize:120}, 
      //左側可以左右拖動改變大小; 但寬度的范圍在80~120之間;
      {region:'center',html:'center'}
    ]
  });

6.3.3 子區域的展開和折疊--collapsible
  //屬性collapsible:true;這個屬性激活了區域折疊功能;
  //title:'west';折疊區域的標題;必須跟collapsible一起設置;
  items:[
    {region:'north',html:'north',heith:100,title:'頂部',collapsible:true},
    ...
  ]

6.4 制作伸縮菜單布局--Accordion(折疊布局)

6.4 制作伸縮菜單布局--Accordion(折疊布局)
  //BorderLayout布局下嵌套的Accordion布局;
  var viewport = new Ext.Viewport({
    layout:'border',        //第一層是BorderLayout布局;
    items:[{
      region:'west',        //子組件左側區域;
      width:200,
      layout:'accordion',   //子組件是Accordion(折疊)布局;
      split:true,
      layoutConfig:{        //布局配置信息;
        titleCollapse:true, //點擊標題也可折疊;
        animate:true,       //折疊動畫;
        activeOnTop:false   //打開的組件是否置頂;
      },
      items:[{              //孫組件;折疊布局;
        title:'第一欄',
        html:'第一欄'
      },{
        title:'第二欄',
        html:'第二欄'
      }]
    },{
      region:'center',      //子組件center區域;
      html:'center區域'
    }]
  });

 

 6.5 實現操作向導的布局--CardLayout

6.5 實現操作向導的布局--CardLayout
  //為CardLayout配置幾個子面板,每次只顯示其中一個;
  var viewport = new Ext.Viewport({
    layout:'border',
    items:[{
      region:'west',
      id:'wizard',
      width:200,
      title:'xx向導',
      layout:'card', 11       activeItem:0,
      bodyStyle:'padding:15px',
      defaults:{
        border:false
      },
      bbar:[{
        id:'move-prev',
        text:'上一步',
        handler:function(){
            navHandler(-1);
        },
        disabled:true
      },'->',{
        id:'move-next',
        text:'下一步',
        handler:function(){
            navHandler(1);
        },
      }],
      items:[{
        id:'card-0',
        html:'<h1>歡迎使用向導</h1><p>1/3</p>'
      },{
        id:'card-1',
        html:'<p>2/3</p>'
      },{
        id:'card-2',
        html:'<p>完成</p>'
      }]
    },{
        region:'center',
        split:true,
        border:true
    }]
  });
  //設置navHandler函數  (帶注釋!)
  var navHandler = function(direction){
    var wizard = Ext.getCmp('wizard').layout;
    var prev = Ext.getCmp('move-prev');
    var next = Ext.getCmp('move-next');
    var activedId = wizard.activeItem.id;
    if(activeId == 'card-0'){
      if(direction == 1){
        wizard.setActiveItem(1);
        prev.setDisabled(false);
      }
    }else if(activeId == 'card-1'){
      if(direction == -1){
        wizard.setActiveItem(0);
        prev.setDisabled(true);
      }else{
        wizard.setActiveItem(2);
        next.setDisabled(true);
      }
    }else if(activeId == 'card-2'){
      if(direction == -1){
        wizard.setActiveItem(1);
        next.setDisabled(false);
      }
    }
  };

 

 6.6 控制位置和大小的布局--AnchorLayout和AbsolluteLayout

6.6 控制位置和大小的布局--AnchorLayout和AbsolluteLayout
  //AnchorLayout提供了靈活的布局方式,既可以為items中的每個組件指定與總體布局大小的差值;也可以設置一個比例使子組件可以根據整體自行計算本身的大小;
  >1.使用百分比進行配置
  //設置某一個子組件占整體長和寬的百分比;
  var viewport = new Ext.Viewport({
    layout:'anchor',        //設置接下來的子組件都為AnchorLayout布局;
    items:[{
      title:'panel1',
      html:'panel1',
      anchor:'50% 50%'      //panel1組件占總體寬度的50%和高度的50%;
    },{
      title:'panel2',
      html:'panel2',
      anchor:'80%'          //panel2組件占總體寬度的80%,高度自適應;
    }]
  });
  >2.設置與右側和底部的邊距;
  var viewport = new Ext.Viewport({
    layout:'anchor',
    items:[{
      title:'panel1',
      html:'panel1',
      anchor:'-50 -200'     //組件與右側和底部的相對(絕對)距離;
    },{
      title:'panel2',
      html:'panel2',
      anchor:'-100'         //組件與右側的距離;
    }]
  });
  >3.side布局;
  //在設置父組件和布局內部子組件都設置好width/height和anchorSize屬性的前提下;AnchorLayout會記錄布局整體與子組件在大小上的差值,為以后調整布局提供依據;
  var viewport = new Ext.Viewport({
    layout:'anchor',
    anchorSize:{width:400,height:300},
    //這是一個包含寬度和高度信息的JSON對象;以此作為以后計算差值的基准;
    items:[{
      title:'panel1',
      html:'panel1',
      width:200,
      height:100,
      anchor:'r b'
    },{
      title:'panel2',
      html:'panel2',
      width:100,
      height:200,
      anchor:'r b'
    }]
  });
  //AnchorLayout首先獲得父組件的寬度/高度,以及每個子組件的寬度/高度,然后將子組件與父組件的寬度/高度之差分別保存起來;根據改變后父組件的大小,計算出子組件當前的寬度和高度;
  >4.同時使用百分比和邊距 52   var viewport = new Ext.Viewport({
    layout:'anchor',
    items:[{
      title:'panel1',
      html:'panel1',
      anchor:'-100 40%'     //組件距右側100px不變,高度是整體的40%;
    },{
      title:'panel2',
      html:'panel2',
      anchor:'-200 60%'     //同上;
    }]
  });
  >5.利用AbsoluteLayout進行絕對定位
  //AbsoluteLayout是AnchorLayout的一個子類;繼承了AnchorLayout的所有特性;
  //AnchorLayout布局下的子組件都是自上而下豎直排列的;而AbsoluteLayout正是可以解決這個問題;
  var viewport = new Ext.Viewport({
    layout:'absolute',     
    //以下組件進行絕對定位;並使用AnchorLayout確定每個組件的相對大小;
    items:[{
      title:'panel1',
      html:'panel1',
      x:50,                 //子組件左上角距父組件的距離;
      y:0,
      anchor:'-200 40%'     //子組件相對於父組件的大小;
    }]
  });

 

 6.7 表單專用的布局--FormLayout

6.7 表單專用的布局--FormLayout
  var viewport = new Ext.Viewport({
    layout:'fit',             //組件自適應填滿布局;
    items:[{
      xtype:'form',  6       title:'信息',
      labelAlign:'right',     //控件標簽右對齊;
      labelWidth:50,          //控件寬度;
      frame:true,             //圓角;
      defaultType:'textfield',//以下組件為文本框控件;
      items:[{
        fieldLabel:'名稱',
        name:'name',
        anchor:'90%'          //占整體90%的空間;
      },{
        fieldLabel:'生日',
        name:'birthday',
        xtype:'datefield',    //日期控件;
        anchor:'90%'
      },{
        fieldLabel:'備注',
        name:'desc',
        xtype:'textarea',     //多行文本控件;
        anchor:'90% -100'     //占整體90%;並且距離底部100px;
      }]
    }]
  });

 

 6.8 分列布局--ColumnLayout

6.8 分列布局--ColumnLayout
  //ColumnLayout是將整個容器進行豎直切分的布局方式;
  >1.使用ColumnLayout實現簡單布局
  var viewport = new Ext.Viewport({
    layout:'column',      //分列布局;
    items:[{
      title:'Column1',
      columnWidth:.25
    },{
      title:'Column2',
      columnWidth:.4
    },{
      title:'Column3',
      columnWidth:.35
    }]
  });
  >2.使用columnWidth平分剩余的寬度
  var view = new Ext.Viewport({
    layout:'column',
    items:[{
      title:'1',
      width:20            //組件一寬度不變;
    },{
      title:'2',
      columnWidth:.7      //寬度為剩下的70%;
    },{
      title:'3',
      columnWidth:.3
    }]
  });

 

 6.9 表格狀布局--TableLayout

6.9 表格狀布局--TableLayout
  var view = new Ext.Viewport({
    layout:'fit',
    items:[{
      title:'Table Layout',
      layout:'table',　　　//表格布局;  7       default:{
        bodyStyle:'padding:20px'
      },
      layoutConfig:{
        columns:3
      },
      items:[{
        html:'<p>A</p>',
        rowspan:2         //合並的行數;
      },{
        html:'<p>B</p>',
        colspan:2         //合並的列數;
      },{
        html:'<p>C</p>',
        cellId:'haha'     //設置單元格ID;
      },{
        html:'<p>D</p>'
      }]
    }]
  });

 

 6.10 BoxLayout--HBox

6.10 BoxLayout--HBox
  //橫排一行多個組件;
  var panel = new Ext.Panel({
    title:'HBox',
    width:400,
    height:200,
    renderTo:'grid',
    layout:{
      type:'hbox',        //指定當前的Panel使用HBox布局方式;
      padding:'5',
      align:'stretch'     //為組件設置統一的對齊方式;自動充滿外部容器的大小;
    },
    defaults:{margins:'0 0 5 0 '},
    items:[{
      xtype:'button',     //按鈕組件;
      text:'Button1',
      flex:1
    },{
      xtype:'button',
      text:'Button2',
      flex:3              //值越大,對應的組件占據的空間越大;
    }]
  });

 

6.11 BoxLayout--VBox

6.11 BoxLayout--VBox
  //豎排一列多個組件;
  var panel = new Ext.Panel({
    ..
    layout:{
      type:'vbox',        //指定當前的Panel使用HBox布局方式;
      padding:'5',
      align:'stretch'
    },
    items:[...]
  });

 

 6.12 Ext.TabPanel

6.12 Ext.TabPanel
  //Tab布局組件
  >1.普通Tab
  var tabs = new Ext.TabPanel({   //創建TabPanel對象;
    renderTo:document.body,       //渲染到指定位置;
    height:100
  });
  //任意組件直接使用add()函數便可添加到Ext.TabPanel中;
  tabs.add({          //若不特別指定xtype,就會默認使用Ext.Panel為這些內容生成子面板;
    id:Ext.id(),      //使用Ext.id()函數生成唯一的id值;
    title:'標題2',
    html:'內容2',
    closable:true     //生成的標簽受否可以手動關閉;
  });
  tabs.activate(0);   //讓指定的標簽變成激活狀態;參數是標簽的索引值;

  >2.添加創建的Tab按鈕
  //添加兩個按鈕,用於新建包含表格的標簽和包含Panel的標簽
  var tabs = new Ext.TabPanel({
    height:200,
    renderTo:'tab',
    enableTabScroll:true
  });
  tabs.add({
    title:'標題一',
    html:'內容一',
    closable:true
  });
  tabs.setActiveTab(0);

  var addGrid = new Ext.Button({  //創建按鈕;
    text:'添加一個grid',
    renderTo:'add-grid',
    handler:function(){           //"新建"按鈕回調函數;
      var id = Ext.id();
      //創建表格↓↓↓↓↓↓↓↓↓↓↓↓↓↓
      var grid = new Ext.grid.GridPanel({
        store:new Ext.data.SimpleStore({
          fields:['id','name'],
          data:[
            ['1','name1'],
            ['2','name2'],
          ]
        }),
        columns:[
          {header:'序號',dataIndex:'id'},
          {header:'名稱',dataIndex:'name'}
        ]
      });
      //將表格組件放入到tabs里↓↓↓↓
      var tab = tabs.add({
        title:'表格'+id,
        closable:true,
        layout:'fit',
 items:[grid]  56       });
      //激活當前的tab標簽↓↓↓↓
 tabs.setActiveTab(tab);  59     }
  });

  var addPanel = new Ext.Button({
    text:'添加一個panel',
    renderTo:'add-panel',
    handler:function(){
      var id = Ext.id();
      var panel = new Ext.Panel({   //創建Panel標簽;
        html:'創建Panel標簽成功'
      });
      var tab2 = tabs.add({
        title:'Panel'+id,
        closable:true,
        layout:'fit',
        items:[panel]
      });
      tabs.setActiveTab(tab2);
    }
  });

  >3.執行從后台得到的HTML(包含JS腳本)
  tabs.add({
    title:'從后台獲取內容',
    autoLoad:{url:'xxx.html',scripts:true}  84     //autoLoad:創建后自動執行;默認是延遲加載的;
    //scripts:執行得到的HTML里的腳本;
  })

6.12.1 標簽面板的滾動菜單
  //TabPanel的組件,可以在標簽過多的時候顯示一個下拉菜單;
  //需引入tabs下的TabScrollMenu.js和TabScrollMenu.css;
  var scrollerMenu = new Ext.ux.TabScrollerMenu({
    maxText:15,
    pageSize:5
  });
  var tabs = new Ext.TabPanel({
    width:400,
    height:200,
    activeTab:0,
    enableTabScroll:true,
    resizeTabs:true,
    minTabWidth:75,
    frame:true,
    plugins:[srcrooerMenu],     //標簽過多時顯示下拉菜單;
    items:[{title:'第一個tab'}],
    renderTo:'tabs'
  });

 

 6.13 與布局相關的知識

6.13 與布局相關的知識
6.13.1 超類Ext.Container的公共配置與xtype的概念
>1.Ext.Container是所有可布局組件的超類;只要繼承它的子類都可以對自身進行布局;
>2.主要參數:
  >.layout(組件布局方式);   6   >.items(包含的子組件);   7 >3.與上面對應的還有兩個參數:
  >.layoutConfig:為布局提供特定的配置參數;
  //在實例化過程中當前類會把自身的layoutConfig參數賦予layout對象並進行配置;
  >.activeItem:表示當前顯示哪一個子組件;  11 4.defaultType參數
  >.當子組件沒有指定xtype參數時,就會使用上級組建中設置的defaultType來作為自身的xtype;
  //默認情況下是defaultType:'panel',也就是在items中創建的每個子組件都是Ext.Panel的實例;
  //若需要其他類型的組件,直接替換成對應的類型的值即可;
5.xtype
  //在Ext中,xtype:'grid'和new Ext.grid.GridPanel()是等價的;
  items:[{
    xtype:'grid',   
    store:store,
    columns:columns
  }]
  //整體布局時,使用xtype更方便,結構也更清晰;
  items:[new Ext.grid.GridPanel({
    store:store,
    columns:columns
  })]
  //創建實例的方式更適用於需要對某一部分進行詳細配置的情況;

6.13.2 layout的超類Ext.layout.ContainerLayout
  //當layout:'auto'時,就表示將使用Ext.layout.ContainerLayout的布局;

6.13.3 不指定任何布局時會發生的情況
  >.組件默認使用的布局類型
  Ext.Container             Ext.layout.ContainerLayout 
  Ext.Viewport              Ext.layout.ContainerLayout
  Ext.Panel                 Ext.layout.ContainerLayout
  Ext.TabPanel              Ext.layout.CardLayout
  Ext.Tip                   Ext.layout.ContainerLayout
  Ext.Window                Ext.layout.ContainerLayout
  Ext.form.FieldSet         Ext.layout.FormPanel
  Ext.form.FormPanel        Ext.layout.FormPanel
  Ext.tree.TreePanel        Ext.layout.ContainerLayout
  Ext.grid.GridPanel        Ext.layout.ContainerLayout
  Ext.grid.EditorGridPanel  Ext.layout.ContainerLayout
  Ext.grid.PropertyPanel    Ext.layout.ContainerLayout

6.13.4 使用Viewport對整個頁面進行布局
  //以上示例中,都是用Ext.Viewport對整個頁面進行統一布局;
  //實際上,Viewport只是一個用於整頁布局的快捷工具類;
  //多個Viewport之間會沖突;

6.13.5 使用嵌套實現復雜布局
  Ext.onReady(function(){

    //表格配置
    var columns = [
      {header:'編號',dataIndex:'id'},
      {header:'名稱',dataIndex:'name'},
      {header:'描述',dataIndex:'descn'}
    ];
    var data = [
      ['1','name1','descn1'],
      ['2','name2','descn2']
    ];
    var store = new Ext.data.ArrayStore({
      data:data,
      fields:[
        {name:'id'},
        {name:'name'},
        {name:'descn'}
      ]
    });
    store.load();
    var grid = new Ext.grid.GridPanel({
      store:store,
      columns:columns,
      title:'center-north',
      region:'north'        //此表格會在Panel布局的上方;
    });

    //樹形配置
    var tree = new Ext.tree.TreePanel({
      store:new Ext.data.TreeStore({
        proxy:{
          type:'ajax',
          url:'xxx.html'
        },
        root:{
          expand:true,
          text:'我是根'
        }
      }),
      title:'west',
      region:'west',        //此樹形組件會在Panel布局的左側;
      split:true,
      border:true,
      collapsible:true,
      width:120,
      minSize:80,
      maxSize:200
    });

    //表單配置
    var form = new Ext.form.FormPanel({
      defaultType:'textfield',
      labelAlign:'right',
      title:'form',
      labelWidth:50,
      frame:true,
      width:220,
      title:'center-center',
      region:'center',       //此表單組件會在Panel布局的中間;
      items:[{
        fieldLabel:'文本框',
        anchor:'90%'
      }],
      button:[{
        text:'按鈕'
      }]
    });

    //布局開始
    var viewport = new Ext.Viewport({
      layout:'border',
      items:[{
        region:'north',
        contentEl:'north-div',    //上布局為id='north-div'的DIV;通過contentEl來指定HTML中顯示的內容;
        heith:80,
        bodyStyle:'background-color:#BBCCEE;'
      },{
        region:'south',           //下布局為id='south-div'的DIV
        contentEl:'south-div',
        height:20,
        bodyStyle:'background-color:#BBCCEE;'
      },tree,{                    //左側布局;樹形;
        region:'center',          //中間布局;
        split:true,
        border:true,
        layout:'border',          //中間區域使用邊界布局;
        items:[gird,form]         //將准備好的表格和表單引入中間布局區域;
      }]
    });
  });
  <div id='north-div'>標題欄:viewport加panel實現復雜布局</div>
  <div id='south-div'>狀態欄:Copyright by www.xxx.com</div>

  //這個Viewport中的每個子組件都是Panel類型;而Panel包含:TreePanel/GridPanel/FormPanel
  //所以Panel的配置參數它們也都可以用;
  //在任何一個Panel里設置layout:'border',就可以將它再次分成5各區域;並用region參數指定各自所在位置;
  Viewport Panel 
    north:north-div;
    south:south-div;
    west:tree;
    center:Panel;
      north:grid;
      center:form;