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'} ] } ); });
http://www.cnblogs.com/piaomiaowc/archive/2013/04/26/3044557.html
