ExtJs6学习(五)【ExtJs布局】

ExtJs布局

1. Auto 默认布局

Auto布局是ExtJs的默认布局，当我们不指定任何layout的时候,用Auto Layout来组织子元素。

Ext.onReady(function() {
  var childPnl1 = {
    frame  : true,
    height : 50,
    html   : 'My First Child Panel',
    title  : 'First children are fun'
  };

  var childPnl2 = {
    xtype  : 'panel',
    width : 150,
    html   : 'Second child',
    title  : 'Second children have all the fun!'
  };

  var myWin = Ext.create("Ext.Window", {
    height     : 300,
    width      : 300,
    title      : 'A window with a container layout',
    autoScroll : true,
    items      : [
      childPnl1,
      childPnl2
    ]
  });

  myWin.show();

});

上面的代码既是在一个window组价中包含了两个panel组件，没有指定布局方式，因此组件将按默认方式自动排列。

2. Anchor 锚点布局

Anchor布局将使组件固定于父容器的某一个位置，使用anchor布局的子组件尺寸相对于容器的尺寸，即父容器容器的大小发生变化时，使用anchor布局的组件会根据规定的规则重新渲染位置和大小。

AnchorLayout布局没有任何的直接配置选项（继承的除外），然而在使用AnchorLayout布局时，其子组件都有一个anchor属性，用来配置此子组件在父容器中所处的位置。

Anchor属性为一组字符串，可以使用百分比或者是-数字来表示。配置字符串使用空格隔开，例如：
- anchor:’75% 25%’，表示宽度为父容器的75%，高度为父容器的25%
- anchor:’-295 -300’，表示组件相对于父容器右边距为295，相对于父容器的底部位300
- anchor:’-250 10%’，混合模式，表示组件党对于如容器右边为250，高度为父容器的10%

var myWin = Ext.create("Ext.Window", {
    height     : 300,
    width      : 300,
    layout     : 'anchor',
    autoScroll : true,
    border     : false,
    anchorSize : '400',
    items      : [
        {
            title  : 'Panel1',
            anchor : '100%, 25%',
            frame  : true
        },
        {
            title  : 'Panel2',
            anchor : '0, 50%',
            frame  : true
        },
        {
            title  : 'Panel3',
            anchor : '50%, 25%',
            frame  : true
        }
    ]
});

运行结果：

当anchor的配置为百分比时，分别表示所占父容器宽、高的百分比。

var myWin = Ext.create("Ext.Window", {
  height     : 300,
  width      : 300,
  layout     : 'anchor',
  autoScroll : true,
  id         : 'myWin',
  border     : false,
  anchorSize : '400',
  items      : [
    {
      title     : 'Panel1',
      anchor    : '-50, -150',
      frame     : true
    },
    {
      title     : 'Panel2',
      anchor    : '-10, -150',
      frame     : true
    }
  ]
});

运行结果：

当anchor的配置为数字时(一般为负数)，分别表示自己的宽、高为父容器宽、高尺寸与配置的数字相加，即减去这个数字的绝对值，因此数字通常为负数。当数字为正时，子元素尺寸会超过父元素大小。

3. Absolute 绝对布局

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

Ext.onReady(function() {
    var myWin = Ext.create("Ext.Window", {
      height     : 300,
      width      : 300,
      layout     : 'absolute',
      autoScroll : true,
      id         : 'myWin',
      border     : false,
      items      : [
        {
          title : 'Panel1',
          x      : 50,
          y      : 50,
          height : 100,
          width  : 100,
          html   : 'x: 50, y:100',
          frame  : true
        },
        {
          title  : 'Panel2',
          x      : 90,
          y      : 120,
          height : 75,
          width  : 100,
          html   : 'x: 90, y: 120',
          frame  : true
        }
      ]
    });

  myWin.show();
});

运行结果：

4. Accordion 手风琴布局(可折叠布局)

Accordion顾名思义，是一种可折叠的布局，类似于手风琴的样式，所以通常被用来作为导航栏或一级菜单，在其面板上定义菜单树。

Ext.onReady(function () {

  var myWin = Ext.create("Ext.Window", {
    height: 200,
    width: 300,
    border: false,
    title: 'A Window with an Accordion layout',
    layout: 'accordion',
    layoutConfig: {
      animate: false
    },
    items: [{
        xtype: 'form',
        title: 'General info',
        bodyStyle: 'padding: 5px',
        defaultType: 'textfield',
        fieldDefaults: {
          labelWidth: 50
        },
        items: [{
            fieldLabel: 'Name',
            anchor: '-10',
            width: 20
          },
          {
            xtype: 'field',
            fieldLabel: 'Age',
            anchor: '-10',
            size: 3
          },
          {
            xtype: 'combo',
            fieldLabel: 'Location',
            anchor: '-10',
            store: ['Here', 'There', 'Anywhere']
          }
        ]
      },
      {
        xtype: 'panel',
        autoEl: {},
        title: 'Bio',
        layout: 'fit',
        items: {
          xtype: 'textarea',
          value: 'Tell us about yourself'
        }
      },
      {
        title: 'Instructions',
        html: 'Please enter information.',
        tools: [{
          id: 'gear'
        }, {
          id: 'help'
        }]
      }
    ]
  });

  myWin.show();
});

运行结果：

每一栏都可以展开和收缩，并且只有一栏被展开。

5. Border 边界布局

Border布局是将页面划分为东，南，西，北，中五个部分，也是最常见的一种布局方式，我们可以根据项目的实际需求保留其中的部分区域，而将其他部分隐藏掉，灵活性很高。

Ext.onReady(function () {

  Ext.create("Ext.Viewport", {
    layout: 'border',
    defaults: {
      frame: true,
      split: true
    },
    items: [{
        title: 'North Panel',
        region: 'north',
        height: 100,
        minHeight: 100,
        maxHeight: 150,
        collapsible: true
      },
      {
        title: 'South Panel',
        region: 'south',
        height: 75,
        split: false,
        margins: {
          top: 5
        }
      },
      {
        title: 'East Panel',
        region: 'east',
        width: 100,
        minWidth: 75,
        maxWidth: 150,
        collapsible: true
      },
      {
        title: 'West Panel',
        region: 'west',
        collapsible: true,
        collapseMode: 'mini',
        width: 100
      },
      {
        xtype: 'container',
        region: 'center',
        layout: 'fit',
        id: 'centerRegion',
        autoEl: {},
        items: {
          title: 'Center Panel',
          id: 'centerPanel',
          html: 'I am disposable',
          frame: true
        }

      }
    ]
  });
});

这段代码中每一个items都有一个region属性，分别指定了组件所在布局的方位。collapsible属性表示该区域是否可以收缩，collapseMode指定收缩后的显示情况，mini将不显示面板原来的标题。

运行结果：

6. Card 卡片布局

Card 布局是一种向导试的布局方式，它在显示的时候，本身是没有上一步、下一步按钮的，但提供了上一步、下一步的操作方法，我们需要在界面中添加导航按钮来配合实际的业务需要。

Ext.onReady(function () {
  var handleNav = function (btn) {
    var activeItem = myWin.layout.activeItem,
      index = myWin.items.indexOf(activeItem),
      numItems = myWin.items.getCount(),
      indicatorEl = Ext.getCmp('indicator').el;

    if (btn.text == 'Forward' && index < numItems - 1) {
      index++;
      myWin.layout.setActiveItem(index);
      indicatorEl.update((index + 1) + ' of ' + numItems);
    } else if (btn.text == 'Back' && index > 0) {
      myWin.layout.setActiveItem(index - 1);
      indicatorEl.update(index + ' of ' + numItems);
    }
  };

  var myWin = Ext.create("Ext.Window", {
    height: 200,
    width: 300,
    autoScroll: true,
    id: 'myWin',
    title: 'A Window with a Card layout',
    layout: 'card',
    activeItem: 0,
    defaults: {
      border: false
    },
    items: [{
        id: "card0",
        html: "first card"
      },
      {
        id: "card1",
        html: "second card"
      },
      {
        id: "card2",
        html: "third card"
      }
    ],
    dockedItems: [{
      xtype: 'toolbar',
      dock: 'bottom',
      items: [{
          text: 'Back',
          handler: handleNav
        },
        '-',
        {
          text: 'Forward',
          handler: handleNav
        },
        '->',
        {
          type: 'component',
          id: 'indicator',
          style: 'margin-right: 5px',
          html: '1 of 3'
        }
      ]
    }]
  });
});

dockedItems通常用来设置toolbar或菜单栏的位置，常设置为top，bottom分别放置在顶部和底部。

运行结果：

7. Fit 填充

Fit Layout 是很常用的一种布局，在Fit布局中，子元素将自动填满整个父容器。

在Fit 布局下，对其子元素设置宽度是无效的。如果在Fit 布局中放置了多个组件，则只会显示第一个子元素。典型的案例就是当客户要求一个window或panel中放置一个GRID组件，grid组件的大小会随着父容器的大小改变而改变。

Ext.onReady(function() {
  var myWin = Ext.create("Ext.Window", {
    height     : 200,
    width      : 200,
    layout     : 'fit',
    autoScroll : true,
    border     : false,
    items      : [
      {
        title : 'Panel1',
        html   : 'I fit in my parent!',
        frame  : true
      }
    ]
  });
  myWin.show();
});

运行结果：

8. Column 列布局

Column 布局用来创建一个多列的布局格式，列宽度可以使用像素值或百分比。

Column布局支持一个columnWidth属性，在布局过程中，使用columnWidth指定每个面板的宽度的百分比，他们的和加起来为1。

columnWidth和width可混合使用，这个时候系统将减去width占用的宽度，然后再根据百分比计算列的宽度。

另外，如果任何子面板没有指定columnWidth值，那么它将占满剩余的空间

Ext.onReady(function () {
  var myWin = Ext.create("Ext.Window", {
    height: 200,
    width: 400,
    autoScroll: true,
    id: 'myWin',
    title: 'A Window with a Column layout',
    layout: 'column',
    defaults: {
      frame: true
    },
    items: [{
        title: 'Col 1',
        id: 'col1',
        columnWidth: .3
      },
      {
        title: 'Col 2',
        html: "20% relative width",
        columnWidth: .2

      },
      {
        title: 'Col 3',
        html: "100px fixed width",
        width: 100
      },
      {
        title: 'Col 4',
        frame: true,
        html: "50% relative width",
        columnWidth: .5
      }
    ],
    renderTo: Ext.getBody()
  });

  myWin.show();
});

运行结果：

9. Table 表格布局

Table Layout 将内容绘制在table标签中，table的列数可以指定，还可以通过设置rowSpan和colSpan来创建复杂的布局。

Ext.onReady(function () {

  var myWin = Ext.create("Ext.Window", {
    height: 300,
    width: 300,
    border: false,
    autoScroll: true,
    id: 'myWin',
    title: 'A Window with a Table layout',
    layout: {
      type: 'table',
      columns: 3
    },
    defaults: {
      height: 50,
      width: 50
    },
    items: [{
        html: '1'
      },
      {
        html: '2'
      },
      {
        html: '3'
      },
      {
        html: '4'
      },
      {
        html: '5'
      },
      {
        html: '6'
      },
      {
        html: '7'
      },
      {
        html: '8'
      },
      {
        html: '9'
      }
    ]
  });

  myWin.show();
});

运行结果：

10. Hbox和Vbox

Hbox

HBox Layout 将子元素放在同一水平位置，通过align设置子元素的对齐方式，对齐方式有：

• top : 默认的对其方式，顶部对齐
• middle : 中间对齐
• bottom : 底部对齐
• stretch : 拉伸对齐，所有子元素根据父容器的高度拉伸
• stretchmax : 拉伸对齐，所有子元素根据子元素中最高的高度拉伸

Ext.onReady(function () {

  var myWin = Ext.create("Ext.Window", {
    width: 500,
    height: 300,
    title: "HBoxLayout Panel",
    layout: {
      type: 'hbox',
      align: 'stretch'
    },
    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
    }],
  });

  myWin.show();
});

运行结果：

Vbox

VBox Layout 以垂直的方式组织所有子元素。它的子元素可以通过align属性来设置对齐方式，vbox的对齐方式有：

• left : 左对齐，默认对其方式
• center : 中间对齐
• right : 右对齐
• stretch : 以父容器的宽度拉伸对齐
• stretchmax : 以所有子元素中的最大宽度拉伸对齐

Ext.onReady(function () {

  var myWin = Ext.create("Ext.Window", {
    width: 500,
    height: 400,
    title: "VBoxLayout Panel",
    layout: {
        type: 'vbox',
        align: 'center'
    },
    items: [{
        xtype: 'panel',
        title: 'Inner Panel One',
        width: 250,
        flex: 2
    },
    {
        xtype: 'panel',
        title: 'Inner Panel Two',
        width: 250,
        flex: 4
    },
    {
        xtype: 'panel',
        title: 'Inner Panel Three',
        width: '50%',
        flex: 4
    }],
  });

  myWin.show();
});

运行结果：

11. Form 表单布局

Form Layout 用来组织表单字段的，Form Layout 下的表单字段会被拉伸到表单的宽度。

var panel = Ext.create("Ext.panel.Panel", {
  width: 350,
  height: 240,
  title: "FormLayout Panel",
  layout: 'form',
  bodyPadding: 5,
  defaultType: 'textfield',
  items: [{
    fieldLabel: '姓名',
    name: 'name',
    allowBlank: false
  }, {
    fieldLabel: '公司',
    name: 'company'
  }, {
    fieldLabel: 'Email',
    name: 'email',
    vtype: 'email'
  }, {
    fieldLabel: '年龄',
    name: 'age',
    xtype: 'numberfield',
    minValue: 0,
    maxValue: 100
  }],
  renderTo: Ext.getBody()
});

运行结果：