Extjs中layout的用法小结

Extjs中layout的用法总结
好久没看过EXT了，最近项目中需要用到就重新复习了下，对于一些知识也都模糊不清，现对Extjs中的layout布局进行总结下：
layout中有absolute,anchor,border,accordion,card,form,table,column,fit这几种，现一一举例：
1.absolute根据字面意思就知道，是根据具体坐标进行定位的，固不写相应的代码了，其他的如下
2.anchor:其值可以使百分比和数值，数值一般为负数，其代表的意思是如果宽度和长度中有一个设定值了，则anchor代表的是未设置的那个，如果两者都没有设定具体值，则如果需要使用anchor则需要anchro:'ww,hh'

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

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

Ext.onReady(function(){         var tab = Ext.create('Ext.tab.Panel',{region:'center',//border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间  margins:'3,3,3,0',activeTab:0,defaults:{autoScroll:true},items:[{title:'tab1',html:'第一个tab内容'},{title:'tab2',html:'第二个tab内容'},{title:'tab3',html:'第三个tab内容'}]})var nav = Ext.create('Ext.panel.Panel',{title:'navigation',region:'west',split:true,width:200,collapsible:true,//允许伸缩margins:'3,0,3,3',cmargins:'3,3,3,'});Ext.create('Ext.Window',{title:'Layout Window',width:600,height:350,closable:true,border:false,plain:true,layout:'border',closeAction:'hide',items:[nav,tab]}).show();)};

4.accordion:这个风格是手风琴式的，效果是如果 有多个item，则点击其中一个，则展开，其他的则收缩。

Ext.OnReady(function(){       Ext.create('Ext.panel.Panel',{title:'容器组件',layout:'accordion',width:600,height:200,layoutConfig:{animate:false},items:[{   title:'元素1',html:''},{   title:'元素2',html:''},{   title:'元素3',html:''},{   title:'元素4',html:''}]}); }); 

5.card:像安装向导一样，一张一张显示

Ext.onReady(function(){var navigate = function(panel,direction){var layout = panel.getLayout();layout[direction]();Ext.getCmp('move-prev').setDisabled(!layout.getPrev());Ext.getCmp('move-next').setDisabled(!layout.getNext());};Ext.create('Ext.panel.Panel',{title:'Example Wizard',height:500,width:400,layout: 'card',activeItem:0,bodyStyle:'padding:15px',animCollapse:true,renderTo:Ext.getBody(),defaults:{        // applied to each contained panel        border: false   },bbar:[{id:'move-prev',text:'back',handler:function(btn){navigate(btn.up("panel"),"prev");},disabled:true},'->',{id:'move-next',text:"next",handler:function(btn){navigate(btn.up("panel"),"next");}}],items:[{id:'card-0',html:'<h1>Welcome to the Wizard!</h1>'},{id:'card-1',html:'<p>step 2 of 3 </p>'},{id:'card-2',html:'<h1>Congratulations!</h1><p>Step 3 of  3-complete</p>'}]});});

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

Ext.onReady(function() {          var win = Ext.create('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();      });  

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

Ext.onReady(function(){        Ext.create('Ext.panel.Panel',        {         renderTo:Ext.getBody(),         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:''}         ]        }       );  }); 

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

Ext.onReady(function() {          var win = Ext.create('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();      });  

9.fit:填充整个容器（如果多个子元素则只有一个元素充满整个容器）

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

查看更多 下一篇