ExtJs 4.1 中的布局

Question

嗨，这是我的第一个问题，所以请对我好一点。 :D

好的，这是我的问题，我对 ExtJs 中的布局有疑问。

基本上我想要这样的布局：

+--------+-----------------+-----------------+-------------------+
|   B    |   TF            |          B      |   TF              |
|--------|--------+--------|-----------------+-------------------+-------------+
|   B    |   TF   |   B    |         B       |    TF             |      B      |
+--------+--------+--------+-----------------+-------------------+-------------+

其中 B 代表 Ext.Button，TF 代表 Ext.form.TextField

这些按钮和 TextField 在

new Ext.Panel({
  layout : {
    type : 'table',
    columns : 10
  }
});

我用 colspan 试过了，但是不行。

Answer 1

您可以使用 hbox and the vbox layout. Important is the flex 属性解决此问题。

示例：https://fiddle.sencha.com/#fiddle/m05

Ext.create("Ext.Panel", {
    width : 800,
    height : 600,

    layout : {
        type : "vbox",
        align : "stretch"
    },

    items : [{
            xtype : "container",
            layout : "hbox",
            margin : "0 0 5 0",
            items : [{
                    xtype : "button",
                    text : "1_1",
                    flex : 1,
                    margin : "0 5 0 0"
                }, {
                    xtype : "textfield",
                    value : "1_2",
                    flex : 2,
                    margin : "0 5 0 0"
                }, {
                    xtype : "button",
                    text : "1_3",
                    flex : 2,
                    margin : "0 5 0 0"
                }, {
                    xtype : "textfield",
                    value : "1_4",
                    flex : 2,
                    margin : "0 5 0 0"
                }, {
                    xtype : "container",
                    flex : 2
                }
            ]
        }, {
            xtype : "container",
            layout : "hbox",
            items : [{
                    xtype : "button",
                    text : "2_1",
                    flex : 1,
                    margin : "0 5 0 0"
                }, {
                    xtype : "container",
                    flex : 2,
                    margin : "0 5 0 0",
                    layout : "hbox",
                    items : [{
                            xtype : "textfield",
                            value : "2_2",
                            flex : 1,
                            margin : "0 5 0 0"
                        }, {
                            xtype : "button",
                            text : "2_3",
                            flex : 1
                        }
                    ]
                }, {
                    xtype : "button",
                    text : "2_4",
                    flex : 2,
                    margin : "0 5 0 0"
                }, {
                    xtype : "textfield",
                    value : "2_5",
                    flex : 2,
                    margin : "0 5 0 0"
                }, {
                    xtype : "button",
                    text : "2_6",
                    flex : 2
                }
            ]
        }
    ],

    renderTo : Ext.getBody()
});

Answer 2

这是 table 布局的另一种变体，唯一的缺点是您必须指定列的宽度，否则列的大小将根据其内容...

var w = 50;
Ext.create('Ext.panel.Panel', {
    title: 'Table Layout',
    layout: {
        type: 'table',
        // The total column count must be specified here
        columns: 10
    },
    defaults: {
        // applied to each contained panel
        bodyStyle: 'padding:20px',
        margin: 5,
        width: w
    },
    items: [{
        xtype: "button",
        text: "1_1",
        colspan: 1
    }, {
        xtype: "textfield",
        value: "1_2",
        colspan: 2,
        width: 2 * w
    }, {
        xtype: "button",
        text: "1_3",
        colspan: 3,
        width: 3 * w
    }, {
        xtype: "textfield",
        value: "1_4",
        colspan: 2,
        width: 2 * w
    }, {
        xtype: 'component',
        html: '',
        colspan: 2,
        width: 2 * w
    }, {
        xtype: "button",
        text: "2_1",
        colspan: 1
    }, {
        xtype: "textfield",
        value: "2_2",
        colspan: 1
    }, {
        xtype: "button",
        text: "2_3",
        colspan: 1
    }, {
        xtype: "button",
        text: "2_4",
        colspan: 3,
        width: 3 * w
    }, {
        xtype: "textfield",
        value: "2_5",
        colspan: 2,
        width: 2 * w
    }, {
        xtype: "button",
        text: "2_6",
        colspan: 2,
        width: 2 * w
    }],
    renderTo: Ext.getBody()
});

ExtJs 4.1 中的布局

Layout in ExtJs 4.1

javascript

layout

extjs

multiple-columns

extjs4.2