深入浅出ExtJS 第六章 布局

 6.1 布局的用途

6.1 布局的用途
  //决定把什么东西放到什么位置;
  var vieport = new Ext.Viewport({
    layout:'border',      //使用BorderLayout的布局方式(边界布局);可以自动检测浏览器的大小变化和自动调整布局中每个部分的大小;
    items:[{
      region:'north',     //指定组件的具体位置;
      height:40,
      html:'<h1>顶部</h1>'
    },{
      region:'west',
      100,
      html:'<p>左侧区域</p>'
    },{
      region:'center',
      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',40},
      {region:'east',html:'east',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',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',        //子组件左侧区域;
      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',
      200,
      title:'xx向导',
      layout:'card',
      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:{400,height:300},
    //这是一个包含宽度和高度信息的JSON对象;以此作为以后计算差值的基准;
    items:[{
      title:'panel1',
      html:'panel1',
      200,
      height:100,
      anchor:'r b'
    },{
      title:'panel2',
      html:'panel2',
      100,
      height:200,
      anchor:'r b'
    }]
  });
  //AnchorLayout首先获得父组件的宽度/高度,以及每个子组件的宽度/高度,然后将子组件与父组件的宽度/高度之差分别保存起来;根据改变后父组件的大小,计算出子组件当前的宽度和高度;
  >4.同时使用百分比和边距
  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',
      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',
      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',　　　//表格布局;
      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',
    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]
      });
      //激活当前的tab标签↓↓↓↓
      tabs.setActiveTab(tab);
    }
  });

  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}     
    //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({
    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(组件布局方式);
  >.items(包含的子组件);
>3.与上面对应的还有两个参数:
  >.layoutConfig:为布局提供特定的配置参数;
  //在实例化过程中当前类会把自身的layoutConfig参数赋予layout对象并进行配置;
  >.activeItem:表示当前显示哪一个子组件;
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,
      120,
      minSize:80,
      maxSize:200
    });

    //表单配置
    var form = new Ext.form.FormPanel({
      defaultType:'textfield',
      labelAlign:'right',
      title:'form',
      labelWidth:50,
      frame:true,
      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;