Extjs中布局layout的9种样式风格总结

      Extjs的容器组件都可以设置它的显示风格，它的有效值有：

      absolute, accordion, anchor, border, card, column, fit, form and table. 一共9种。

      简单总结一下，帮助记忆。 

 

• absolute 顾名思义，在容器内部，根据指定的坐标定位显示
• accordion 这个是最容易记的，手风琴效果

• Ext.OnReady(function(){
  var panel=new Ext.Panel(//Ext.formPanel就是Panel中用了form布局
        {
         renderTo:'paneldiv',
         title:'容器组件',
         layout:'accordion',       
         width:500,
         height:200,
         layoutConfig:{animate:false},
         items:[
          {title:'元素1',html:''},
          {title:'元素2',html:''},
          {title:'元素3',html:''},
          {title:'元素4',html:''}
         ]
        }
       );
  });
  

  • anchor 这个效果具体还不知道有什么用，就是知道注意一下
    1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，
    2.anchor值通常只能为负值(指非百分比值)，正值没有意义，
    3.anchor必须为字符串值

  Ext.onReady(function() {
          var panel1 = new Ext.Panel({
              title: "panel1",
              height: 100,
              anchor: '-50',
              html: "高度等于100，宽度=容器宽度-50"
          });
  
          var panel2 = new Ext.Panel({
              title: "panel2",
              height: 100,
              anchor: '50%',
              html: "高度等于100,宽度=容器宽度的50%"
  
          });
  
          var panel3 = new Ext.Panel({
              title: "panel3",
              anchor: '-10, -250',
              html: "宽度=容器宽度-10,高度=容器宽度-250"
  
          });
  
          var win = new Ext.Window({
              title: "Anchor Layout",
              height: 400,
              width: 400,
              plain: true,                    
              layout: 'anchor',
              items: [panel1, panel2,panel3]            
          });
          win.show();
      });
  

  
  

  • border 将容器分为五个区域:east,south,west,north,center

   Ext.onReady(function() {     
  
          var button = Ext.get('show-btn');
          var win;
          
          button.on('click', function() {
  
              //创建TabPanel
              var tabs = new Ext.TabPanel({
                  region: 'center', //border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间
                  margins: '3 3 3 0',
                  activeTab: 0,
                  defaults: {
                      autoScroll: true
                  },
                  items: [{
                      title: 'Bogus Tab',
                      html: "第一个Tab的内容."
                  }, {
                      title: 'Another Tab',
                      html: "我是另一个Tab"
                  }, {
                      title: 'Closable Tab',
                      html: "这是一个可以关闭的Tab",
                      closable: true
  }]
                  });
  
                  //定义一个Panel
                  var nav = new Ext.Panel({
                      title: 'Navigation',
                      region: 'west', //放在西边，即左侧
                      split: true,
                      width: 200,
                      collapsible: true, //允许伸缩
                      margins: '3 0 3 3',
                      cmargins: '3 3 3 3'
                  });
  
                  //如果窗口第一次被打开时才创建
                  if (!win) {
                      win = new Ext.Window({
                          title: 'Layout Window',
                          closable: true,
                          width: 600,
                          height: 350,
                          border : false,
                          plain: true,
                          layout: 'border',
                          closeAction:'hide',
                          items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局
                      });
                  }
                  win.show(button);
              });
          });
  

  
  

  • card 像安装向导一样，一张一张显示

  Ext.onReady(function() {
  
          var i = 0;
  
          var navHandler = function(direction) {
              if (direction == -1) {
                  i--;
                  if (i < 0) { i = 0; }
              }
  
              if (direction == 1) {
                  i++;
                  if (i > 2) { i = 2; return false; }
              }
  
  
              var btnNext = Ext.get("move-next").dom.document.getElementsByTagName("button")[1];
              var btnBack = Ext.get("move-next").dom.document.getElementsByTagName("button")[0];
  
              if (i == 0) {
                  btnBack.disabled = true;
              }
              else {
                  btnBack.disabled = false;
              }
  
              if (i == 2) {
                  btnNext.value = "完成";
                  btnNext.disabled = true;
              }
              else {
                  btnNext.value = "下一步";
                  btnNext.disabled = false;
              }
  
              card.getLayout().setActiveItem(i);
  
          };
  
  
          var card = new Ext.Panel({
              width: 200,
              height: 200,
              title: '注册向导',
              layout: 'card',
              activeItem: 0, // make sure the active item is set on the container config!
              bodyStyle: 'padding:15px',
              defaults: {
                  border: false
              },
              bbar: [
                  {
                      id: 'move-prev',
                      text: '上一步',
                      handler: navHandler.createDelegate(this, [-1])                    
                  },
                  '->',
                  {
                      id: 'move-next',
                      text: '下一步',
                      handler: navHandler.createDelegate(this, [1])
                  }
              ],
  
              items: [{
                  id: 'card-0',
                  html: '<h1>欢迎来到注册向导!</h1><p>Step 1 of 3</p>'
              }, {
                  id: 'card-1',
                  html: '<h1>请填写注册资料!</h1><p>Step 2 of 3</p>'
              }, {
                  id: 'card-2',
                  html: '<h1>注册成功!</h1><p>Step 3 of 3 - Complete</p>'
  }],
  
                  renderTo: "container"
              });
  
  
  
          });
  

  
  

  • column 把整个容器看成一列,然后向容器放入子元素时

  Ext.onReady(function() {
          var win = new Ext.Window({
              title: "Column Layout",
              height: 300,
              width: 400,
              plain: true,
              layout: 'column',
              items: [{
                  title:"width=50%",
                  columnWidth:0.5,
                  html:"width=(容器宽度-容器内其它组件固定宽度)*50%",
                  height:200
              },
              {
                  title:"width=250px",
                  width: 200,
                  height:100,
                  html:"固定宽度为250px"
              }            
              ]
          });
          win.show();
      });
  

  
  

  • fit 一个子元素将充满整个容器（如果多个子元素则只有一个元素充满整个容器）

  Ext.OnReady(function(){
  var panel=new Ext.Panel(
        {
         renderTo:'paneldiv',
         title:'容器组件',
         layout:'fit',
         width:500,
         height:100,
         items:[
          {title:'子元素1'},
          {title:'子元素2'},
          {title:'子元素3'},
          {title:'子元素4'},
          {title:'子元素5'}
         ]
        }
       );
  });
  

   

  • form 是一种专门用于管理表单中输入字段的布局

  Ext.onReady(function() {
          var win = new Ext.Window({
              title: "form Layout",
              height: 150,
              width: 230,
              plain: true,
              bodyStyle: 'padding:15px',
              items: 
              {
                  xtype: "form",
                  labelWidth: 30,
                  defaultType: "textfield",
                  frame:true,
                  items: 
                  [
                      {
                          fieldLabel:"姓名",
                          name:"username",
                          allowBlank:false
                      },
                      {
                          fieldLabel:"呢称",
                          name:"nickname"
                      },
                      {
                          fieldLabel: "生日",
                          xtype:'datefield',
                          name: "birthday",
                          width:127
                      }
                  ]
              }
          });
          win.show();
      });
  

  
  

• table 按照普通表格的方法布局子元素，用layoutConfig:{columns:3},//将父容器分成3列
  

  Ext.onReady(function(){
  var panel=new Ext.Panel(
        {
         renderTo:'paneldiv',
         title:'容器组件',
         layout:'table',       
         width:500,
         height:200,
         layoutConfig:{columns:3},//将父容器分成3列
         items:[
          {title:'元素1',html:'ssssssssss',rowspan:2,height:100},
          {title:'元素2',html:'dfffsddsdfsdf',colspan:2},
          {title:'元素3',html:'sdfsdfsdf'},
          {title:'元素4',html:''}
         ]
        }
       );
  });