时间戳

首页 > 技术文章 > Extjs4——布局

Extjs4——布局

chen1234 2017-09-19 14:23 原文

在Ext中，所有的布局都是从Ext.Container开始的，Ext.Container的父类是Ext.BoxComponent。与Ext.Container相似，所有的布局类也有一个共同的超类Ext。layout.ContainerLayout。凡是继承自该超类的子类都可以对Ext.Container和它的子类进行布局定义，这两颗继承树结合在一起便构成了Ext中完整的布局系统。另外要说明的是我们经常使用Viewport对整个页面进行布局，而且每个页面只能有一个Viewport。

                            

 

 

1.Auto自动布局（系统默认）

 Auto布局实际就是Ext.layout.ContainerLayout,一般这个布局是不会用到的。

<script type="text/javascript">
 Ext.onReady(function(){
    Ext.create('Ext.panel.Panel',{
        title:'布局示例',
        frame:true,//要渲染
        width:300,
        renderTo:Ext.getBody(),
        bodyPadding:5,
        layout:'auto',
        defaults:{
            bodyStyle:'background-color:#FFFFFF'
        }，//面板items配置项默认的xtype类型为panel，该默认值可通过defaultType配置项来更改
        items:[{
            title:'嵌套面板一',
            html:'面板一'

        },{
            title:'嵌套面板二',
            html:'面板二'
        }]
    });
 });
</script>

 

2.Fit自适应布局

Fit布局的缺点是每次只能使用一个子组件，即使放了多个组件，也只有第一个组件会起作用。

<script type="text/javascript">
 Ext.onReady(function(){
    Ext.create('Ext.panel.Panel',{
        title:'布局示例',
        frame:true,//要渲染
        width:300,
        renderTo:Ext.getBody(),
        bodyPadding:5,
        layout:'fit',
        defaults:{
            bodyStyle:'background-color:#FFFFFF'
        }，//面板items配置项默认的xtype类型为panel，该默认值可通过defaultType配置项来更改
        items:[{
            title:'嵌套面板一',
            html:'面板一'

        },{
            title:'嵌套面板二',
            html:'面板二'
        }]
    });
 });
</script>

3.Accordion折叠布局

注意Accordion没有提供默认的标题，所以必须给每个子元素都要添加title参数，不设置标题是一定会出错的。

<script type="text/javascript">
 Ext.onReady(function(){
    Ext.create('Ext.panel.Panel',{
        title:'布局示例',
        frame:true,//要渲染
        width:300,
        renderTo:Ext.getBody(),
        bodyPadding:5,
        layout:'accordion',
        defaults:{
            bodyStyle:'background-color:#FFFFFF'
        }，//面板items配置项默认的xtype类型为panel，该默认值可通过defaultType配置项来更改
        items:[{
            title:'嵌套面板一',
            html:'面板一'

        },{
            title:'嵌套面板二',
            html:'面板二'
        }]
    });
 });
</script>

 

4.Card卡片式布局

这种布局用来制作操作向导最合适，因为一次只能显示一个子面板，所以可以用setActiveItem方法来切换子面板

<script type="text/javascript">
 Ext.onReady(function(){
    Ext.create('Ext.panel.Panel',{
        title:'布局示例',
        frame:true,//渲染面板
        width:300,
        height:150,
        renderTo:Ext.getBody(),
        bodyPadding:5,
        layout:'card',
        activeItem:0,//设置默认显示第一个子面板
        defaults:{
            bodyStyle:'background-color:#FFFFFF'
        },
        items:[{
            title:'嵌套面板一',
            html:'说明一',
            id:'p1'

        },{
            title:'嵌套面板二',
            html:'说明二',
            id:'p2'
        },
        {
            title:'嵌套面板三',
            html:'说明三',
            id:'p3'
        }],
        buttons:[{
            text:'上一页',
            handler:changePage

        },{
            text:'下一页',
            handler:changePage
        }]
    });
    function changePage(btn){
        var index=Number(panel.layout.activeItem.id.substring(1));
        if(btn.text=='上一页')
        {
            index-=1;
            if(index<1)
            {
                index=1;
            }
            else
            {
                index+=1;
                if(index>3)
                    {index=3;}

            }
        }
        panel.layout.setActiveItem('p'+index);
    }
 });
</script>

5.border布局

 border布局是当前项目实现中经常使用到的一种布局形式。这种布局将整个页面划分为五个部分，分别是上（north）、下（south）、左（west）、右（east）、中（center）。通过region这个属性指定特定组件显示在页面中的特定位置，并可以指定待显示组件的宽度或高度。当然，宽度和高度的设置对于center中的组件是无效的，因为center中的组件默认布局为fit。

   对于border布局来说，上、下、左、右这四个部分的显示内容不是必须存在的，但是一个border布局中center部分必不可少。

例：

 

/*
* Viewport: 
* 1.Viewport渲染自身到网页的documet body区域， 并自动将自己调整到适合浏览器窗口的大小， 
* 在窗口大小发生改变时自动适应大小。 一个页面中只能创建一个Viewport。 
* 2.任何的Container容器都可以作为一个Viewport 的子组件， 
* 开发者使用一个Viewport作为父容器配置布局layout，并管理他们的大小和位置。 
* 3.Viewports一般使用border layout布局, 如果开发者需要的布局很简单,可以指定一个简单布局。 
*  
*/ 
Ext.onReady(function(){ 
    var panel=new Ext.Viewport({ 
        layout:"border",  //边界布局 
        items:[{ 
             title:"north panel", 
             html:"<div style='height:150px'>上面</div>", 
             collapsible : true, 
             region:"north"//指定子面板所在区域在north（上） 
        },{ 
             title:"south panel", 
             html:"<div style='height:150px'>下面</div>", 
             collapsible : true, 
             region:"south"//指定子面板所在区域在south（下） 
        },{ 
             title:"west panel", 
             html:"<div style='width:150px'>左面</div>", 
             collapsible : true, 
             region:"west"//指定子面板所在区域在west（左） 
        },{ 
             title:"center panel", 
             html:"中间", 
             region:"center"//指定子面板所在区域在center（中） 
        },{ 
             title:"east panel", 
             html:"<div style='width:150px'>右面</div>", 
             collapsible : true, 
             region:"east"//指定子面板所在区域在east（右） 
        }] 
    }); 
});

6.Anchor锚点布局

这个布局就是表单面板默认支持的，每一项占据一行，支持用anchor配置项分配各个子项的高度和宽度。为百分比时表示当前大小占父容器的百分比，为数字的时一般为负数，表示父容器的值减去差值，剩下的为子项的大小。父容器提供anchorSize，子容器提供anchor

百分比方式：

    var viewport = new Ext.Viewport({
        layout:'anchor',
        items:[{
            title: 'panel 1',
            html: 'panel 1',
            anchor: '50% 50%'
        },{
            title: 'panel 2',
            html: 'panel 2',
            anchor: '80%'
        }]
    });

边距方式：

ar viewport = new Ext.Viewport({
        layout:'anchor',
        items:[{
            title: 'panel 1',
            html: 'panel 1',
            anchor: '-50 -200'//与右侧和底部的相对距离分别为50,200
        },{
            title: 'panel 2',
            html: 'panel 2',
            anchor: '-100'//距右侧的相对距离为100，高度为“auto”
        }]
    });

参考边定位方式：

必须为各个组件设置width和height属性，Anchor布局会计算子组件与父组件的宽度，高度只差并保存起来。在父组件大小改变之后，Anchor会使用之前保存的差值，计算出子组件当前的宽度和高度。这种方式很少用。

 var viewport = new Ext.Viewport({
        layout:'anchor',
        anchorSize: {width:400,height:300},
        items:[{
            title: 'panel 1',
            html: 'panel 1',
            width: 200,
            height: 100,
            anchor: 'r b'
        },{
            title: 'panel 2',
            html: 'panel 2',
            width: 100,
            height: 200,
            anchor: 'r b'//也可写成'right bottom'
        }]
    });

7.表单布局FormLayout

这是表单专用的布局，它是Ext.form.FormPanel的默认布局方式，首先FormLayout是AnchorLayout的一个子类，可以在它里面使用anchor设置宽和高的比例，但是它主要用于表单布局。

利用anchor对表单内的多个field进行布局：

 var viewport = new Ext.Viewport({
        layout:'fit',
        items:[{
            xtype: 'form',//form的默认布局是FormLayout
            title: '信息',
            labelAlign: 'right',
            labelWidth: 50,
            frame: true,
            defaultType: 'textfield',
            items: [{
                fieldLabel: '名称',
                name: 'name',
                anchor: '90%'
            }, {
                fieldLabel: '生日',
                name: 'birthday',
                xtype: 'datefield',
                anchor: '90%'
            },{
                fieldLabel: '备注',
                name: 'desc',
                xtype: 'textarea',
                anchor: '90% -100'
            }]
        }]
    });

效果如下：

 

8.表格布局（TableLayout）：

layoutConfig中的column定义一共要分几列，然后在各个子面板中使用rowspan和columnspan设置如何进行行和列的合并。

 var viewport = new Ext.Viewport({
        layout:'fit',
        items:[{
            title: 'Table Layout',
            layout: {
                type: 'table',
                columns: 3
            },
            defaults: {
                bodyStyle:'padding:20px'
            },
            items: [{
                html: '<p>Cell A content</p>',
                rowspan: 2
            },{
                html: '<p>Cell B content</p>',
                colspan: 2
            },{
                html: '<p>Cell C content</p>'
            },{
                html: '<p>Cell D content</p>'
            }]
        }]
    });

效果如下：

 

9.分列布局（ColumnLayout）

 将整个容器进行竖直切分的布局方式，可以使用具体值或者百分比以及两者混合的方式。

    var viewport = new Ext.Viewport({
        layout:'column',
        items: [{
            title: 'Column 1',
            width: 120
        },{
            title: 'Column 2',
            columnWidth: .7
        },{
            title: 'Column 3',
            columnWidth: .3
        }]
    });

效果如下：

10.BoxLayout：

分为水平布局（HBox）和竖直布局（VBox）

水平布局的例子：

    var panel = new Ext.Panel({
        title: 'HBox',
        width: 400,
        height: 200,
        renderTo: 'grid',
        layout: {
            type:'hbox',
            padding:'5',
            align:'stretch'
        },
        defaults:{margins:'0 0 5 0'},
        items:[{
            xtype:'button',
            text: 'Button 1',
            flex:1
        },{
            xtype:'button',
            text: 'Button 2',
            flex:1
        },{
            xtype:'button',
            text: 'Button 3',
            flex:1
        },{
            xtype:'button',
            text: 'Button 4',
            flex:3
        }]
    });

效果如下：

 

竖直布局的例子：

var panel = new Ext.Panel({
        title: 'HBox',
        width: 400,
        height: 200,
        renderTo: 'grid',
        layout: {
            type:'vbox',
            padding:'5',
            align:'stretch'
        },
        defaults:{margins:'0 0 5 0'},
        items:[{
            xtype:'button',
            text: 'Button 1',
            flex:1
        },{
            xtype:'button',
            text: 'Button 2',
            flex:1
        },{
            xtype:'button',
            text: 'Button 3',
            flex:1
        },{
            xtype:'button',
            text: 'Button 4',
            flex:3
        }]
    });

效果如下：

 

推荐阅读