Extjs--12种布局方式

原创 2015年09月29日 12:09:12

按照Extjs的4.1的文档来看,extjs的布局方式大致有12种,下面一一介绍,有些代码就是文档中的。

1.Border 边界布局

   border布局,最多可以将页面分割为“东南西北中”五部分,是最常用的一种布局方式。我们可以根据项目的实际需求保留其中的部分区域,而将其他部分隐藏掉。

1.1效果图预览
这里写图片描述
1.2 代码demo

Ext.onReady(function () {
          //border布局 最多可将页面划分为5个区域
          //使用Viewport容器 可自适应页面窗口大小
          //一个页面只可有一个viewport
           new Ext.Viewport({
                title: "border layout",
                layout: "border",
                defaults: {
                    bodyStyle: "background-color: #FFFFFF;",
                    frame: true
                },
                items: [
                        //collapsible:是否可折叠
                        { region: "west", width:90, title: 'west', collapsible: true },
                        { region: "east", width: 90, title: 'east', collapsible: true },
                        { region: "north", height: 100, title:'north' , collapsible:true },
                        { region: "center", split: true, border: true, collapsible: true,title:'center' },
                        { region: "south", title:"south", split: true, border: true, collapsible: true, height: 100 },

                        ]
            });
});

1.3 关注点
a.north和south区域需要指定高度height,west和east区域需要指定宽度width。
b.尽管当不包含center组件时,页面并不会由于语法错误而无法显示,但页面中会有一部分区域空出来。所以在使用border布局时,必须要定义其center区域。
c.center域不必赋予其宽度和高度,即使你定义了其宽高也不会有任何效果;当其他区域未定义比如south,center域会自动填充空出来的部分,如下图:
这里写图片描述

2.accordion 手风琴布局【可折叠布局】

可折叠的accordion通常被用来作为导航栏或一级菜单来使用,手风琴的每个title定义为一级菜单,在其面板上定义菜单树,就是一个完整的导航了。
2.1 预览
这里写图片描述

2.2代码demo

Ext.onReady(function () {
            //定义手风琴布局
            var accordion = Ext.create("Ext.panel.Panel", {
                title: "west",
                layout: "accordion",  //设置为手风琴布局
                layoutConfig: {
                    animate: true
                },
                width: 250,
                minWidth: 90,
                region: "west", //设置方位 位于border布局的west
                split: true,
                collapsible: true,
                items: [
                            { title: "面板一", html: "面板一", iconCls: "save" },
                            { title: "面板二", html: "面板二", iconCls: "search" },
                            { title: "面板三", html: "面板三", iconCls: "back" },
                            { title: "面板四", html: "面板四", iconCls: "12" }
                       ]
            });
            //整体布局采用border
            new Ext.Viewport({
                title: "Viewport",
                layout: "border", //这里是(border)边界布局
                defaults: {
                    bodyStyle: "background-color: #FFFFFF;",
                    frame: true
                },
                items: [
                             accordion, //这里是(accordion)手风琴布局
                            {region: "east", width: 90, title: 'east', collapsible: true },
                            { region: "north", height: 100, title: 'north', collapsible: true },
                            { region: "center", split: true, border: true, collapsible: true, title: 'center' },
                            { region: "south", title: "south", split: true, border: true, collapsible: true, height: 100 }
                        ]
            });
        });

2.3 关注点
a.只有 Ext的各种Panel和Ext.panel.Panel的子类可以用于这种布局的容器中.

3.Anchor 锚点布局

锚点布局将子元素与父容器绑定到了一块,当父容器大小发生改变时,所有固定的子项将按各自的anchor 规则自动被重新渲染固定.
3.1 预览图
这里写图片描述
3.2 代码demo

Ext.onReady(function(){
        //锚点布局
        //容器内子项通过比例布局
        //若容器大小改变 子元素等比缩放
     Ext.application({
         name: 'anchor',
         launch: function () {
             Ext.create('Ext.Panel', {
                width: 500,
                height: 400,
                title: "AnchorLayout Panel",
                layout: 'anchor',
                x:100,
                y:100,
                renderTo: Ext.getBody(),
                items: [
                    {
                        xtype: 'panel',
                        title: '75% Width and 20% Height',
                        anchor: '75% 20%'
                    },
                    {
                        xtype: 'panel',
                        title: 'Offset -300 Width & -200 Height',
                        anchor: '-300 -200'     
                    },
                    {
                        xtype: 'panel',
                        title: 'Mixed Offset and Percent',
                        anchor: '-250 20%'
                    }
                ]
            });



         }});


});

3.3 关注点
a.上述代码中anchor属性有三种写法
一、anchor: ‘75% 20%’ 子元素宽度为容器的75%,高度为20%
二、 anchor: ‘-300 -200’ 子元素距离容器右边距300,底部200
三、anchor: ‘-250 20%’ 混合模式 子元素距离右边250,高度为20%
b.xtype用来定义子元素的类型

4.Absolute 绝对布局

 Absolute布局继承自anchor,但是absolute是使用标准的x,y来定义子元素的坐标,所以当父容器大小改变时,子元素不会随之变化。

4.1 预览图
这里写图片描述
4.2代码demo

Ext.onReady(function(){
       //绝对布局
       //通过指定坐标来布局
       //由于指定了坐标 无法自适应
     Ext.application({
         name: 'absolute',
         launch: function () {
                Ext.create('Ext.form.Panel', {
                    title: 'Absolute Layout',
                    width: 300,
                    height: 275,
                    x:400,
                    y:100,
                    layout: {
                        type: 'absolute'
                    },
                    url:'save-form.php',
                    defaultType: 'textfield',
                    items: [{
                        x: 10,
                        y: 10,
                        xtype:'label',
                        text: 'Send To:'
                    },{
                        x: 80,
                        y: 10,
                        name: 'to',
                      //  anchor:'90%'  // anchor width by percentage
                    },{
                        x: 10,
                        y: 40,
                        xtype:'label',
                        text: 'Subject:'
                    },{
                        x: 80,
                        y: 40,
                        name: 'subject',
                    //    anchor: '90%'  // anchor width by percentage
                    },{
                        x:0,
                        y: 80,
                        xtype: 'textareafield',
                        name: 'msg',
                     //   anchor: '100% 100%'  // anchor width and height
                    }],
                    renderTo: Ext.getBody()
                });


         }});

});

4.3 关注点
a.上面代码的预览中,如果改变父容器的大小,子元素不会随着变化,但有时我们既想使用坐标来定位,又希望子元素随容器变化,这时可以使用anchor属性,你可以去掉代码中的相关注释试试看。由于absolute是继承自anchor的,所有可以使用该属性。

5.Card 卡片布局

card管理多个子组件, 每个都完全填满父容器, 而每次仅显示一个. 此布局样式多用于向导, 实现标签页布局等等
5.1 效果图预览
这里写图片描述
这里写图片描述
5.2 代码demo

Ext.onReady(function(){

      //卡片布局 可以定义多个卡片 但每次只显示一个
      //可以通过setActiveItem指定
      //常用来做向导、分步提交
      Ext.application({
          name: 'card',
          launch: 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: 'Card布局示例',
                  width: 300,
                  height: 202,
                  layout: 'card',
                  activeItem: 0,  //默认显示的card 从0号开始   
                  x: 30,
                  y: 60,
                  bodyStyle: 'padding:15px',
                  defaults: { border: false },
                  //bbar 底部工具栏 tbar顶部工具栏
                  bbar: [{
                      id: 'move-prev',
                      text: '上一步',
                      handler: function (btn) {
                          navigate(btn.up("panel"), "prev");
                      },
                      disabled: true
                  },
                  '->',
                  {
                      id: 'move-next',
                      text: '下一步',
                      handler: function (btn) {
                          navigate(btn.up("panel"), "next");
                      }
                  }],
                  items: [{
                      id: 'card-0',
                      html: '<h1>第一步</h1>'
                  },
                  {
                      id: 'card-1',
                      html: '<h1>第二步</h1>'
                  },
                  {
                      id: 'card-2',
                      html: '<h1>最后一步</h1>'
                  }],
                  renderTo: Ext.getBody()
              });
          }
      });
});

6.Fit

能使当容器只包含一个子元素时, 子元素自动填满容器
6.1 预览
这里写图片描述
6.2 代码demo

Ext.onReady(function(){

     Ext.application({
         name:"fit",
         launch:function(){
             //当设置为fit的面板有唯一的子组件时会自动填充满      
             Ext.create('Ext.panel.Panel', {
                    title: 'Fit Layout',
                    width: 300,
                    height: 150,
                    layout:'fit',
                    items: [{
                        title: 'Inner Panel',
                        html: 'This is the inner panel content',
                        bodyPadding: 20,
                        border: false
                    }],
                    renderTo: Ext.getBody()
                });

         }

     });

});

6.3关注点
a.如果你想要使用fit实现布局,就应该只给其一个子元素

7.form 表单布局

这个布局会将表单中所有的输入框纵向的依次的排列, 且宽度与容器宽度相等.

7.1预览
这里写图片描述
7.2 代码demo

Ext.onReady(function(){

    Ext.application({
        name:"form",
        launch:function(){
            //表单布局 所有输入框(表单项)纵向依次排列
            //表单项宽度与容器宽度一致

            Ext.create('Ext.Panel', {
                width: 500,
                height: 300,
                title: "FormLayout Panel",
                layout: 'form',
                renderTo: Ext.getBody(),
                bodyPadding: 5,
                defaultType: 'textfield',
                items: [{
                   fieldLabel: 'First Name',
                    name: 'first',
                    allowBlank:false
                },{
                    fieldLabel: 'Last Name',
                    name: 'last'
                },{
                    fieldLabel: 'Company',
                    name: 'company'
                }, {
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email'
                }, {
                    fieldLabel: 'DOB',
                    name: 'dob',
                    xtype: 'datefield'
                }, {
                    fieldLabel: 'Age',
                    name: 'age',
                    xtype: 'numberfield',
                    minValue: 0,
                    maxValue: 100
                }, {
                    xtype: 'timefield',
                    fieldLabel: 'Time',
                    name: 'time',
                    minValue: '8:00am',
                    maxValue: '6:00pm'
                }]
            });
        }
    });

});


7.3关注点
a.表单项的宽度与容器一致,所以在Form布局下各子控件的padding属性配置将被忽略

8.column 列布局

这个布局用于在一个多列格式中创建结构化布局的布局样式, 每列可以用百分比或固定的宽度值来定义,
8.1预览
这里写图片描述
8.2代码demo

Ext.onReady(function(){

    Ext.application({
        name:"column",
        launch:function(){  
            //列布局 创建一个多列的布局
            //每列的宽度可以通过百分比定义 所有的和为1
            Ext.create('Ext.panel.Panel', {
                title: 'Column Layout - Percentage Only',
                width: 350,
                height: 250,
                layout:'column',
                items: [{
                    title: 'Column 1',
                    columnWidth: 0.25
                },{
                    title: 'Column 2',
                    columnWidth: 0.55
                },{
                    title: 'Column 3',
                    columnWidth: 0.20
                }],
                renderTo: Ext.getBody()
            });
        }
    });

});

8.3 注意
a.每列的宽度可以通过百分比定义 所有的和为1

9.table表格布局

通过指定rowspan和colspan来实现复杂布局
9.1预览图
这里写图片描述
9.2代码demo

Ext.onReady(function(){

    Ext.application({
        name:"column",
        launch:function(){  
            //通过指定rowspan和colspan来实现复杂布局
            //指定每部分占据几行几列 会自动按顺序分配
            Ext.create('Ext.panel.Panel', {
                title: 'Table Layout',
                width: 500,
                height: 150,
                layout: {
                    type: 'table',
                    columns: 3
                },
                defaults: {
                    bodyStyle: 'padding:20px'
                },
                items: [{
                    html: 'Cell A content',
                    rowspan: 2
                },{
                    html: 'Cell B content',
                    colspan: 2
                },{
                    html: 'Cell C content',
                    cellCls: 'highlight'
                },{
                    html: 'Cell D content'
                }],
                renderTo: Ext.getBody()
            });
        }
    });

});

9.3 关注点
a.我们指定每部分占据几行几列,该布局会自动按顺序分配

10.Hbox

水平box,所有组件水平依次排列
10.1预览
这里写图片描述
10.2 代码demo

Ext.onReady(function(){

    Ext.application({
        name:"hbox",
        launch:function(){
            //所有组件水平依次排列
            //根据flax的数值按比例分配
            Ext.create('Ext.Panel', {
                width: 500,
                height: 300,
                title: "HBoxLayout Panel",
                layout: {
                    type: 'hbox',
                    align: 'stretch'
                },
                renderTo: document.body,
                items: [{
                    xtype: 'panel',
                    title: 'Inner Panel One',
                    flex: 2
                },{
                    xtype: 'panel',
                    title: 'Inner Panel Two',
                    flex: 1
                },{
                    xtype: 'panel',
                    title: 'Inner Panel Three',
                    flex: 1
                }]
            });
        }
    });

});


11.Vbox

垂直box,所有组件垂直依次排列
11.1预览

这里写图片描述
11.2代码demo

Ext.onReady(function(){

    Ext.application({
        name:"hbox",
        launch:function(){
            //所有组件垂直依次排列
            //根据flax的数值按比例分配
            Ext.create('Ext.Panel', {
                width: 500,
                height: 300,
                title: "HBoxLayout Panel",
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                renderTo: document.body,
                items: [{
                    xtype: 'panel',
                    title: 'Inner Panel One',
                    flex: 2
                },{
                    xtype: 'panel',
                    title: 'Inner Panel Two',
                    flex: 1
                },{
                    xtype: 'panel',
                    title: 'Inner Panel Three',
                    flex: 1
                }]
            });
        }
    });

});


12 auto 默认布局

默认的布局方式,不指定layout时的布局方式
12.1预览
这里写图片描述
12.2 代码demo

Ext.onReady(function(){
    //默认的布局方式
    //此时写不写layout:'auto' 没区别
     Ext.application({
         name: 'auto',
         launch: function () {

             Ext.create('Ext.Panel', {
                    width: '100%',
                    height: '100%',
                    title: "AutoLayout Panel",
                    layout: 'auto',
                    renderTo: document.body,
                    items: [{
                        xtype: 'panel',
                        title: 'Top Inner Panel',
                        width: '75%',
                        height: 90
                    },
                    {
                        xtype: 'panel',
                        title: 'Bottom Inner Panel',
                        width: '75%',
                        height: 90
                    }]
                });




         }});

});
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012116457/article/details/48803883

ExtJs常用布局--layout详解(含实例)

序言: 笔者用的ExtJs版本:ext-3.2.0 ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor ...
  • fifteen718
  • fifteen718
  • 2016年05月23日 18:27
  • 22055

ExtJs 6.0+快速入门之布局详解(Layout)

布局作为最重要的1.ContainerLayout这种布局是ExtJs 中默认的布局 这种布局的一般情况是按照从上到下的堆叠的方式进行堆叠的代码{ title: 'ContainerLayout(默...
  • blueboz
  • blueboz
  • 2017年06月11日 22:12
  • 1655

ExtJS面板与布局

本例演示版为ext-4.2.1 面板(Panel)         ExtJS不但在Web开发中成功引入了丰富的组件,也引入了桌面程序中常用到的面板和布局概念。这些概念的引入在很大程度上改变了传统...
  • ma_hoking
  • ma_hoking
  • 2015年12月05日 13:50
  • 2744

ExtJS之布局篇

Ext布局总的来说是很灵活的,因此我觉得有必要一块探讨一下。 Ext常用的布局都在Ext.layout下,这里几乎涵盖了所有的布局方式(但是值得注意的是通常我们不是直接通过"new"来创建这些类的对...
  • jianxin160
  • jianxin160
  • 2010年08月28日 23:49
  • 64577

ExtJS中layout的12种布局风格

·  absolute 顾名思义,在容器内部,根据指定的坐标定位显示  layout: 'absolute', items:[{ title: 'Panel 1', x: 50,...
  • xys_00
  • xys_00
  • 2016年03月13日 21:43
  • 826

Extjs布局大全

  • 2012年03月18日 10:46
  • 1.1MB
  • 下载

ExtJs常用布局--layout详解实例代码

  • 2016年05月23日 18:33
  • 1.55MB
  • 下载

ExtJS学习笔记(一)运用region属性布局遇到的问题

博主it小白,还在新手村挣扎,如有什么错误请不吝赐教。最近公司要求使用extjs进行java-web开发,参照公司的框架边学边写,遇到过不少坑,在这里记录一下学习的过程。 标题分栏:要实现这种效果,只...
  • zsy_li
  • zsy_li
  • 2017年06月16日 11:37
  • 527

Ext JS 6组件,容器, 布局

组件Ext JS应用的UI是由一个或者多个widgets组称, 我们称之为Components. 所有的组件都是Ext.Component的子类,允许组件自动管理生命周期, 包括instantiati...
  • cexo425
  • cexo425
  • 2016年08月16日 17:47
  • 4289

EXT 做布局设置的一点经验

用EXTJS设置界面布局时有时候需要做一些较复杂的布局,同时要求布局中的各个部分能够自适应高度和宽度。最近在公司做了一个项目,用EXT实现portal功能,用户界面要求能够自定义。其中就涉及了一些比较...
  • zsy_gemini
  • zsy_gemini
  • 2010年12月05日 23:52
  • 8937
收藏助手
不良信息举报
您举报文章:Extjs--12种布局方式
举报原因:
原因补充:

(最多只允许输入30个字)