佈局系統詳解

時間  2019-11-12
標籤 佈局 系統 詳解 简体版
原文   原文鏈接

在ExtJS 4.2中，提供了十幾種佈局，咱們能夠在api中看到：php

在這些佈局中，咱們經常使用的有Accordion、Border、Column、Fit、Form等。下面咱們來看一下具體的用法。html

Auto Layout

Auto Layout 是ExtJS 容器的默認佈局，當咱們定義一個panel的時候，若是沒有指定panel的佈局，那麼它就會使用Auto Layout來組織子元素。api

Auto Layout 的用法（查看在線演示）：佈局

var panel = Ext.create("Ext.panel.Panel", {
    title: "Auto Layout",
    width: 500,
    height: 400,
    items: [
        { xtype: "panel", title: "第一個子Panel", width: 200, height: 100 },
        { xtype: "panel", title: "第二個子Panel", width: 150, height: 100 },
        { xtype: "textfield", width: 300, fieldLabel: "請輸入用戶名" }
    ],
    renderTo: "container"
});

Auto Layout 自己不包含任何特殊的佈局功能，它只是提供了一種調用子元素佈局系統的通道。flex

Anchor Layout

 

Anchor佈局將使組件固定於父容器的某一個位置，使用anchor佈局的子組件尺寸相對於容器的尺寸，即父容器容器的大小發生變化時，使用anchor佈局的組件會根據規定的規則從新渲染位置和大小。url

AnchorLayout佈局沒有任何的直接配置選項（繼承的除外），然而在使用AnchorLayout佈局時，其子組件都有一個anchor屬性，用來配置此子組件在父容器中所處的位置。spa

Anchor屬性爲一組字符串，可使用百分比或者是-數字來表示。配置字符串使用空格隔開，例如：orm

  • anchor:'75% 25%'，表示寬度爲父容器的75%，高度爲父容器的25%
  • anchor:'-295 -300'，表示組件相對於父容器右邊距爲295，相對於父容器的底部位300
  • anchor:'-250 10%'，混合模式，表示組件黨對於如容器右邊爲250，高度爲父容器的10%

Anchor Layout 用法（查看在線演示）：htm

var panel = Ext.create("Ext.panel.Panel", {
    width: 500,
    height: 400,
    title: "Anchor佈局",
    layout: "anchor",
    x: 60,
    y: 80,
    renderTo: "container",
    items: [
        { xtype: 'panel', title: '75% Width and 25% Height', anchor: '75% 25%' },
        { xtype: 'panel', title: 'Offset -300 Width & -200 Height', anchor: '-295 -300' },
        { xtype: 'panel', title: 'Mixed Offset and Percent', anchor: '-250 10%' }
    ]
});

Absolute Layout

 

Absolute Layout 繼承自 Anchor Layout，並增長了X/Y配置選項對子組件進行定位，Absolute佈局的目的是爲了擴展布局的屬性，使得佈局更容易使用。繼承

Absolute Layout 用法（查看在線演示）：

Ext.create('Ext.form.Panel', {
    title: 'Absolute Layout',
    width: 400,
    height: 275,
    layout: '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%' },
        { x: 10, y: 40, xtype: 'label', text: 'Subject:' },
        { x: 80, y: 40, name: 'subject', anchor: '90%' },
        { x: 0, y: 80, xtype: 'textareafield', name: 'msg', anchor: '100% 100%' }
    ],
    renderTo: 'container'
});

Column Layout

 

Column 佈局用來建立一個多列的佈局格式，列寬度可使用像素值或百分比。

Column佈局支持一個columnWidth屬性，在佈局過程當中，使用columnWidth指定每一個面板的寬度的百分比，他們的和加起來爲1。

columnWidth和width可混合使用，這個時候系統將減去width佔用的寬度，而後再根據百分比計算列的寬度。

另外，若是任何子面板沒有指定columnWidth值，那麼它將佔滿剩餘的空間。

Column Layout 用法（查看在線演示）：

// 全部列都是百分比，他們的和加起來爲1
Ext.create('Ext.panel.Panel', {
    title: 'Column Layout',
    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: "container"
});

// width和columnWidth混合使用
Ext.create('Ext.Panel', {
    title: 'Column Layout - Mixed',
    width: 350,
    height: 250,
    layout: 'column',
    items: [{
        title: 'Column 1',
        width: 120
    }, {
        title: 'Column 2',
        columnWidth: 0.7
    }, {
        title: 'Column 3',
        columnWidth: 0.3
    }],
    renderTo: "container"
});

Border Layout

 

Border 佈局將界面分爲上下左右中五個區域，分別用north、south、west、east、center來表示，它的每一個子項用region指定元素的位置。

雖然Border佈局看上去比較麻煩，但用起來卻很是簡單（查看在線示例）：

var panel = Ext.create("Ext.panel.Panel", {
    width: 500,
    height: 300,
    title: 'Border Layout',
    layout: 'border',
    items: [{
        title: 'South Region (可調整大小)',
        region: 'south',     // 所在的位置
        xtype: 'panel',
        height: 100,
        split: true,         // 容許調整大小
        margins: '0 5 5 5'
    }, {
        title: 'West Region (可摺疊/展開)',
        region: 'west',
        xtype: 'panel',
        margins: '5 0 0 5',
        width: 200,
        collapsible: true,   // 可摺疊/展開
        id: 'west-region-container',
        layout: 'fit'
    }, {
        title: 'Center Region (必須)',
        region: 'center',     // 必須指定中間區域
        xtype: 'panel',
        layout: 'fit',
        margins: '5 5 0 0'
    }],
    renderTo: "container"
});

Accordion Layout

 

Accordion Layout 是將其子元素以手風琴的效果顯示。

它的子元素必須是panel，或者panel的子類。

Accordion Layout 的使用很是廣泛，咱們來一個簡單的示例（查看在線示例）：

var panel = Ext.create("Ext.panel.Panel", {
    title: "Accordion Layout",
    width: 300,
    height: 300,
    defaults: {
        // 應用到全部子panel
        bodyStyle: 'padding:15px'
    },
    layout: {
        // 佈局配置
        type: 'accordion',
        titleCollapse: false,
        animate: true,
        activeOnTop: true
    },
    items: [{
        title: 'Panel 1',
        html: 'Panel content!'
    }, {
        title: 'Panel 2',
        html: 'Panel content!'
    }, {
        title: 'Panel 3',
        html: 'Panel content!'
    }],
    renderTo: "container"
});

Card Layout

 

Card 佈局是一種嚮導試的佈局方式，它在顯示的時候，自己是沒有上一步、下一步按鈕的，但提供了上一步、下一步的操做方法，咱們須要在界面中添加導航按鈕來配合實際的業務須要。

示例代碼以下（查看在線示例）：

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());
};

var panel = Ext.create('Ext.panel.Panel', {
    title: '示例嚮導,
    x: 50,
    y: 50,
    width: 300,
    height: 200,
    layout: 'card',
    bodyStyle: 'padding:15px',
    defaults: {
        border: false
    },
    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: '<p>第一步</p>'
    }, {
        id: 'card-1',
        html: '<p>第二步</p>'
    }, {
        id: 'card-2',
        html: '<p>第三步</p>'
    }],
    renderTo: "container"
});

Fit Layout

 

Fit Layout 是很經常使用的一種佈局，在Fit佈局中，子元素將自動填滿整個父容器。

在Fit 佈局下，對其子元素設置寬度是無效的。若是在Fit 佈局中放置了多個組件，則只會顯示第一個子元素。典型的案例就是當客戶要求一個window或panel中放置一個GRID組件，grid組件的大小會隨着父容器的大小改變而改變。

Fit Layout 示例代碼（查看在線示例）：

var panel = Ext.create("Ext.panel.Panel", {
    title: 'Fit Layout',
    x: 30,
    y: 30,
    width: 300,
    height: 150,
    layout: 'fit',
    items: {
        title: '內部Panel',
        html: '內部Panel 的內容',
        bodyPadding: 20,
        border: false
    },
    renderTo: "container"
});

Form Layout

 

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: "container"
});

Table Layout

 

Table Layout 將內容繪製在table標籤中，table的列數能夠指定，還能夠經過設置rowSpan和colSpan來建立複雜的佈局。

示例代碼以下（查看在線示例）：

var panel = Ext.create("Ext.panel.Panel", {
    title: 'Table Layout',
    width: 300,
    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: "container"
});

Box Layout

Box Layout 是HBox Layout 和 VBox Layout 的父類，通常不會直接用到。

HBox Layout

 

HBox Layout 將子元素放在同一水平位置，經過align設置子元素的對齊方式，對齊方式有：

  • top : 默認的對其方式，頂部對齊
  • middle : 中間對齊
  • bottom : 底部對齊
  • stretch : 拉伸對齊，全部子元素根據父容器的高度拉伸
  • stretchmax : 拉伸對齊，全部子元素根據子元素中最高的高度拉伸

示例代碼以下（查看在線示例）：

var panel = Ext.create("Ext.panel.Panel", {
    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
    }],
    renderTo: "container"
});

VBox Layout

 

VBox Layout 以垂直的方式組織全部子元素。它的子元素能夠經過align屬性來設置對齊方式，vbox的對齊方式有：

  • left : 左對齊，默認對其方式
  • center : 中間對齊
  • right : 右對齊
  • stretch : 以父容器的寬度拉伸對齊
  • stretchmax : 以全部子元素中的最大寬度拉伸對齊

示例代碼以下（查看在線示例）：

var panel = Ext.create("Ext.panel.Panel", {
    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
    }],
    renderTo: "container"
});
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程