extjs中layout布局

extjs的容器组件都可以设置它的显示风格，它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table. 一共9种。简单总结一下，帮助记忆。 
[list]

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

  1. Ext.OnReady(function(){  
  2. var panel=new Ext.Panel(//Ext.formPanel就是Panel中用了form布局  
  3.       {  
  4.        renderTo:'paneldiv',  
  5.        title:'容器组件',  
  6.        layout:'accordion',         
  7.        500,  
  8.        height:200,  
  9.        layoutConfig:{animate:false},  
  10.        items:[  
  11.         {title:'元素1',html:''},  
  12.         {title:'元素2',html:''},  
  13.         {title:'元素3',html:''},  
  14.         {title:'元素4',html:''}  
  15.        ]  
  16.       }  
  17.      );  
  18. });  


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

  1. Ext.onReady(function() {  
  2.         var panel1 = new Ext.Panel({  
  3.             title: "panel1",  
  4.             height: 100,  
  5.             anchor: '-50',  
  6.             html: "高度等于100，宽度=容器宽度-50"  
  7.         });  
  8.   
  9.         var panel2 = new Ext.Panel({  
  10.             title: "panel2",  
  11.             height: 100,  
  12.             anchor: '50%',  
  13.             html: "高度等于100,宽度=容器宽度的50%"  
  14.   
  15.         });  
  16.   
  17.         var panel3 = new Ext.Panel({  
  18.             title: "panel3",  
  19.             anchor: '-10, -250',  
  20.             html: "宽度=容器宽度-10,高度=容器宽度-250"  
  21.   
  22.         });  
  23.   
  24.         var win = new Ext.Window({  
  25.             title: "Anchor Layout",  
  26.             height: 400,  
  27.              400,  
  28.             plain: true,                      
  29.             layout: 'anchor',  
  30.             items: [panel1, panel2,panel3]              
  31.         });  
  32.         win.show();  
  33.     });  


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

  1.  Ext.onReady(function() {       
  2.   
  3.         var button = Ext.get('show-btn');  
  4.         var win;  
  5.           
  6.         button.on('click', function() {  
  7.   
  8.             //创建TabPanel  
  9.             var tabs = new Ext.TabPanel({  
  10.                 region: 'center', //border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间  
  11.                 margins: '3 3 3 0',  
  12.                 activeTab: 0,  
  13.                 defaults: {  
  14.                     autoScroll: true  
  15.                 },  
  16.                 items: [{  
  17.                     title: 'Bogus Tab',  
  18.                     html: "第一个Tab的内容."  
  19.                 }, {  
  20.                     title: 'Another Tab',  
  21.                     html: "我是另一个Tab"  
  22.                 }, {  
  23.                     title: 'Closable Tab',  
  24.                     html: "这是一个可以关闭的Tab",  
  25.                     closable: true  
  26. }]  
  27.                 });  
  28.   
  29.                 //定义一个Panel  
  30.                 var nav = new Ext.Panel({  
  31.                     title: 'Navigation',  
  32.                     region: 'west', //放在西边，即左侧  
  33.                     split: true,  
  34.                      200,  
  35.                     collapsible: true, //允许伸缩  
  36.                     margins: '3 0 3 3',  
  37.                     cmargins: '3 3 3 3'  
  38.                 });  
  39.   
  40.                 //如果窗口第一次被打开时才创建  
  41.                 if (!win) {  
  42.                     win = new Ext.Window({  
  43.                         title: 'Layout Window',  
  44.                         closable: true,  
  45.                          600,  
  46.                         height: 350,  
  47.                         border : false,  
  48.                         plain: true,  
  49.                         layout: 'border',  
  50.                         closeAction:'hide',  
  51.                         items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局  
  52.                     });  
  53.                 }  
  54.                 win.show(button);  
  55.             });  
  56.         });  


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

  1. Ext.onReady(function() {  
  2.   
  3.         var i = 0;  
  4.   
  5.         var navHandler = function(direction) {  
  6.             if (direction == -1) {  
  7.                 i--;  
  8.                 if (i < 0) { i = 0; }  
  9.             }  
  10.   
  11.             if (direction == 1) {  
  12.                 i++;  
  13.                 if (i > 2) { i = 2; return false; }  
  14.             }  
  15.   
  16.   
  17.             var btnNext = Ext.get("move-next").dom.document.getElementsByTagName("button")[1];  
  18.             var btnBack = Ext.get("move-next").dom.document.getElementsByTagName("button")[0];  
  19.   
  20.             if (i == 0) {  
  21.                 btnBack.disabled = true;  
  22.             }  
  23.             else {  
  24.                 btnBack.disabled = false;  
  25.             }  
  26.   
  27.             if (i == 2) {  
  28.                 btnNext.value = "完成";  
  29.                 btnNext.disabled = true;  
  30.             }  
  31.             else {  
  32.                 btnNext.value = "下一步";  
  33.                 btnNext.disabled = false;  
  34.             }  
  35.   
  36.             card.getLayout().setActiveItem(i);  
  37.   
  38.         };  
  39.   
  40.   
  41.         var card = new Ext.Panel({  
  42.              200,  
  43.             height: 200,  
  44.             title: '注册向导',  
  45.             layout: 'card',  
  46.             activeItem: 0, // make sure the active item is set on the container config!  
  47.             bodyStyle: 'padding:15px',  
  48.             defaults: {  
  49.                 border: false  
  50.             },  
  51.             bbar: [  
  52.                 {  
  53.                     id: 'move-prev',  
  54.                     text: '上一步',  
  55.                     handler: navHandler.createDelegate(this, [-1])                      
  56.                 },  
  57.                 '->',  
  58.                 {  
  59.                     id: 'move-next',  
  60.                     text: '下一步',  
  61.                     handler: navHandler.createDelegate(this, [1])  
  62.                 }  
  63.             ],  
  64.   
  65.             items: [{  
  66.                 id: 'card-0',  
  67.                 html: '<h1>欢迎来到注册向导!</h1><p>Step 1 of 3</p>'  
  68.             }, {  
  69.                 id: 'card-1',  
  70.                 html: '<h1>请填写注册资料!</h1><p>Step 2 of 3</p>'  
  71.             }, {  
  72.                 id: 'card-2',  
  73.                 html: '<h1>注册成功!</h1><p>Step 3 of 3 - Complete</p>'  
  74. }],  
  75.   
  76.                 renderTo: "container"  
  77.             });  
  78.   
  79.   
  80.   
  81.         });  


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

  1. Ext.onReady(function() {  
  2.         var win = new Ext.Window({  
  3.             title: "Column Layout",  
  4.             height: 300,  
  5.              400,  
  6.             plain: true,  
  7.             layout: 'column',  
  8.             items: [{  
  9.                 title:"width=50%",  
  10.                 columnWidth:0.5,  
  11.                 html:"width=(容器宽度-容器内其它组件固定宽度)*50%",  
  12.                 height:200  
  13.             },  
  14.             {  
  15.                 title:"width=250px",  
  16.                  200,  
  17.                 height:100,  
  18.                 html:"固定宽度为250px"  
  19.             }              
  20.             ]  
  21.         });  
  22.         win.show();  
  23.     });  


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

  1. Ext.OnReady(function(){  
  2. var panel=new Ext.Panel(  
  3.       {  
  4.        renderTo:'paneldiv',  
  5.        title:'容器组件',  
  6.        layout:'fit',  
  7.        500,  
  8.        height:100,  
  9.        items:[  
  10.         {title:'子元素1'},  
  11.         {title:'子元素2'},  
  12.         {title:'子元素3'},  
  13.         {title:'子元素4'},  
  14.         {title:'子元素5'}  
  15.        ]  
  16.       }  
  17.      );  
  18. });  

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

  1. Ext.onReady(function() {  
  2.         var win = new Ext.Window({  
  3.             title: "form Layout",  
  4.             height: 150,  
  5.              230,  
  6.             plain: true,  
  7.             bodyStyle: 'padding:15px',  
  8.             items:   
  9.             {  
  10.                 xtype: "form",  
  11.                 labelWidth: 30,  
  12.                 defaultType: "textfield",  
  13.                 frame:true,  
  14.                 items:   
  15.                 [  
  16.                     {  
  17.                         fieldLabel:"姓名",  
  18.                         name:"username",  
  19.                         allowBlank:false  
  20.                     },  
  21.                     {  
  22.                         fieldLabel:"呢称",  
  23.                         name:"nickname"  
  24.                     },  
  25.                     {  
  26.                         fieldLabel: "生日",  
  27.                         xtype:'datefield',  
  28.                         name: "birthday",  
  29.                         127  
  30.                     }  
  31.                 ]  
  32.             }  
  33.         });  
  34.         win.show();  
  35.     });  


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

  1. Ext.onReady(function(){  
  2. var panel=new Ext.Panel(  
  3.       {  
  4.        renderTo:'paneldiv',  
  5.        title:'容器组件',  
  6.        layout:'table',         
  7.        500,  
  8.        height:200,  
  9.        layoutConfig:{columns:3},//将父容器分成3列  
  10.        items:[  
  11.         {title:'元素1',html:'ssssssssss',rowspan:2,height:100},  
  12.         {title:'元素2',html:'dfffsddsdfsdf',colspan:2},  
  13.         {title:'元素3',html:'sdfsdfsdf'},  
  14.         {title:'元素4',html:''}  
  15.        ]  
  16.       }  
  17.      );  
  18. });  
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/zhxhdean/p/2152002.html