Extjs布局

今天我来总结一下extjs下面的各种布局，不仅是为了给自己做笔记，同时，也希望让刚刚接触extjs的朋友们快速的了解下，大神就不用看了。废话不多说，开始布局的讲解。

（以下代码都可以直接在javascript中直接复制使用，希望大家能够较好的使用学习。）

1.auto布局使用（默认布局）  就是自动排版 没有任何的设定  几乎很少使用到

Ext.onReady(function () {
    //设置提示消息的显示方式 
    var panel1 = Ext.create('Ext.panel.Panel', {
title : 'panel1',
html : 'panel1ddd',
height : 80,
width : 100
});
var panel2 = Ext.create('Ext.panel.Panel', {
title : 'panel2',
html : 'panel2ffff',
height : 80,
width : 100
});
var panel3 = Ext.create('Ext.panel.Panel', {
title : 'panel3',
html : 'panel3yyyy',
height : 80,
width : 100
});
var panel4 = Ext.create('Ext.panel.Panel', {
title : 'panel4',
html : 'panel4GGG',
height : 80,
width : 100
});
var auto = Ext.create('Ext.window.Window', {
title : 'auto Layout',
width : 100,
height : 420,
layout : 'auto',
defaults : {
bodyStyle : 'padding:15px'
},
items : [panel1, panel2, panel3, panel4]
});
auto.show();

});

 

效果图：

2 anchor布局（按百分比显示）使用anchor布局的子组件尺寸相对于容器的尺寸，即父容器容器的大小发生变化时，使用anchor布局的组件会根据规定的规则重新渲染位置和大小。多数使用在类似表格的排版中。

var panel5 = Ext.create('Ext.panel.Panel', {
title : 'panel5',
html : '100% 30%',
anchor : '100% 30%'
});
var panel6 = Ext.create('Ext.panel.Panel', {
title : 'panel6',
html : '100% 25%',
anchor : '1000% 25%'
});


var panel7 = Ext.create('Ext.panel.Panel', {
title : 'panel7',
html : '100% 15%',
anchor : '100% 15%'
});


var panel8 = Ext.create('Ext.panel.Panel', {
title : 'panel8',
html : '100% 30%',
anchor : '100% 30%'
});


var anchor = Ext.create('Ext.window.Window', {
title : 'Anchor Layout',
width : 250,
height : 300,
layout : 'anchor',
defaults : {
bodyStyle : 'padding:10px'
},
items : [panel5, panel6, panel7, panel8]
});
anchor.show();

 

　　

效果图:　

　3 HBox 布局（水平）

首先的熟悉下一下几个主要属性：

一、align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。

    1、top（默认）：排列于容器顶端。

    2、middle：垂直居中排列于容器中。

    3、stretch：垂直排列且拉伸义填补容器高度

    4、stretchmax:垂直拉伸，并且组件以最高高度的组件为准。

二、flex:数字类型，指示组件在容器中水平呈现方式，通俗的讲，就是指示组件在容器中的相对宽度。

三、pack : 字符类型，指示组件在容器的位置，有如下几种属性。

    1、start（默认）：组件在容器左边

    2、center：组件在容器中间

    3、end：组件在容器的右边

Ext.onReady(function(){
   var d1 = Ext.create('Ext.Panel',{
  title:'HBox 顶对齐，且组件在容器的左边',
  frame:true,
  width:600,
  height:100,
  items:[{
    anchor:'100%',
    layout: {
        type:'hbox',
        padding:'10',
        pack:'start',
        align:'top'
    },
    defaults:{margins:'0 5 0 0'},
    items:[{
        xtype:'button',
        text: 'Button 1'
    },{
        xtype:'button',
        text: 'Button 2'
    },{
        xtype:'button',
        text: 'Button 3'
    },{
        xtype:'button',
        text: 'Button 4'
    }]
  }]
})
   
d1.render('d1');
var d2 = Ext.create('Ext.Panel',{
  title:'HBox 垂直对齐，且组件在容器的右边',
  frame:true,
  width:600,
  height:100,
  items:[{
    anchor:'100%',
    layout: {
        type:'hbox',
        padding:'10',
        align:'middle',
        pack:'end'
    },
    defaults:{margins:'0 5 0 0'},
    items:[{
        xtype:'button',
        text: 'Button 1'
    },{
        xtype:'button',
        text: 'Button 2'
    },{
        xtype:'button',
        text: 'Button 3'
    },{
        xtype:'button',
        text: 'Button 4'
    }]
  }]
})
   
d2.render('d2');
var d3 = Ext.create('Ext.Panel',{
  title:'HBox 垂直水平居中，并且所有控件高度为最高控件的高度',
  frame:true,
  width:600,
  height:100,
  items:[{
     anchor:'100%',
        
     layout: {
        type: 'hbox',
        padding:'5',
        align:'stretchmax',
        pack:'center'
    },
    defaults:{margins:'0 5 0 0'},
    items:[{
        xtype:'button',
        text: 'Small Size'
    },{
        xtype:'button',
        scale: 'medium',
        text: 'Medium Size'
    },{
        xtype:'button',
        scale: 'large',
        text: 'Large Size'
    }]
  }]
})
   
d3.render('d3');
 })

 

效果图：

4. VBox布局(垂直)   使用的不多，就简单介绍下  代码如下

var p1 = Ext.create('Ext.panel.Panel', {
title : 'p1',
html : 'p1',
flex : 2
});


var p2 = Ext.create('Ext.panel.Panel', {
title : 'p2',
html : 'p2',
flex : 1
});
var vbox = Ext.create('Ext.window.Window', {
title : 'VBox Layout',
width : 82,
height : 300,
layout : {
type : 'vbox',
align : 'stretch'
},
defaults : {
bodyStyle : 'padding:15px'
},
items : [p1, p2]
});
vbox.show();

5.accordion(折叠布局)  主要实现为手风琴效果，可与树做搭配使用形成可伸缩的菜单

var pa1 = Ext.create('Ext.panel.Panel', {
title : 'pa1',
html : '<b>pa1</b>'
});
var pa2 = Ext.create('Ext.panel.Panel', {
title : 'pa1',
html : '<b>pa2</b>'
});
var pa3 = Ext.create('Ext.panel.Panel', {
title : 'pa3',
html : '<b>pa3</b>'
});
var pa4 = Ext.create('Ext.panel.Panel', {
title : 'pa4',
html : '<b>pa4</b>'
});
var pa5 = Ext.create('Ext.panel.Panel', {
title : 'pa5',
html : '<b>pa5</b>'
});


var accordion = Ext.create('Ext.window.Window', {
title : 'Accordion Layout',
margins : '5 0 5 5',
split : true,
width : 210,
height : 250,
layout : 'accordion',
defaults : {
bodyStyle : 'padding:35 15 0 50'
},
items : [pa1, pa2, pa3, pa4, pa5]
});
accordion.show();

效果图:

6. fit布局（显示一个单独的组件在一容器上，填满容器空间）

var pan1 = Ext.create('Ext.panel.Panel', {
title : 'pan1',
bodyStyle : 'padding:15px',
html : 'Fit content'
});
var fit = Ext.create('Ext.window.Window', {
title : 'fit layout',
width : 100,
height : 150,
layout : 'fit',
items : [pan1]
});
fit.show();

　7.border布局   在extjs中最常用的布局方式  该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。而主体部分就是center，他会自动填充页面没有填满的地方.

var border = Ext.create('Ext.window.Window', {
width : 700,
height : 400,
title : 'Border Layout',
layout : 'border',
defaults : {
xtype : 'panel'
},
items : [{
title : 'North Region is resizable',
region : 'north',
height : 100,
split : true
}, {
title : 'South Region is resizable',
region : 'south',
height : 100,
split : true
}, {
title : 'West Region is collapsible',
region : 'west',
width : 200,
collapsible : true,
layout : 'fit'
}, {
title : 'East Region is collapsible',
region : 'east',
width : 200,
collapsible : true,
layout : 'fit'
}, {
title : 'Center Region',
region : 'center',
layout : 'fit'
}]
});
border.show();

 效果图:

8.card布局方式，可以用来做window的操作切换form界面。该布局会包含多个子面板，任何时候都只有一个子面板处于显示状态，这种布局类经常用来制作向导和标签页。该布局的重点方式是setActiveItem，因为一次只能显示一个子面板，所以切换子面板的唯一途径就是调用setActiveItem方法，它接受一个子面板id或索引作为参数。CardLayout布局并没有提供一个子面板的导航机制，导航逻辑需要开发人员自己实现。

Ext.onReady(function(){
    var panel = new Ext.Panel({
        layout : 'card',
        activeItem : 0,                //设置默认显示第一个子面板
        title:'Ext.layout.CardLayout布局示例',
        frame:true,                        //渲染面板
        height : 250,
        width : 350,
        renderTo: Ext.getBody(),
        defaults : {                        //设置默认属性
            bodyStyle:'background-color:#FFFFFF;padding:15px' //设置面板体的背景色
        },
        items: [
            {
                xtype:"panel",
                title : '嵌套面板一',
                html : '说明一',
                id : 'p1',
                items:[
                {
                    xtype: 'textfield',
                    fieldLabel: '申请标题',
                    name: 'titleApplyInfo',
                    width:200,
                    allowBlank:false,
                    minValue: 0,
                    nanText:'输入格式错误',  
                }]
            },
            {
                title : '嵌套面板二',
                html : '说明二',
                id : 'p2',
                items:[
                {
                    xtype: 'textfield',
                    fieldLabel: '文章内容',
                    name: 'titleApplyInfo',
                    width:200,
                    allowBlank:false,
                    minValue: 0,
                    nanText:'输入格式错误',  
                }]
            }
        ],
        buttons:[
            {
                text : '切换',
                handler : changePage
            }
        ]
    })
    //切换子面板
    function changePage(btn){
        var index = Number(panel.layout.activeItem.id.substring(1));
        if(index == 1){index = 2;}
        else{index = 1;}
        panel.layout.setActiveItem('p'+index);
    }
});