现对Extjs中的layout布局进行总结下： layout中有absolute,anchor,border,accordion,card,form,table,column,fit这几种，现一一举例： 1.absolute根据字面意思就知道，是根据具体坐标进行定位的，固不写相应的代码了，其他的如下 2.anchor:其值可以使百分比和数值，数值一般为负数，其代表的意思是如果宽度和长度中有一个设定值了，则anchor代表的是未设置的那个，如果两者都没有设定具体值，则如果需要使用anchor则需要anchro:
- 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();
- });
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();
- )};
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:''
- }]
- });
- });
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>'
- }]
- });
- });
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:'Welcome to the Wizard!
' },{ id:'card-1', html:'step 2 of 3
' },{ id:'card-2', html:'Congratulations!
Step 3 of 3-complete
' }] });}); 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();
- });
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:''}
- ]
- }
- );
- });
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();
- });
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'}
- ]
- }
- );
- });