ExtJs 4.1 中的布局答案

【问题标题】：Layout in ExtJs 4.1ExtJs 4.1 中的布局
【发布时间】：2015-07-06 20:23:46
【问题描述】：

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

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

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

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

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

那些按钮和文本字段在一个

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

我用 colspan 尝试过，但它不起作用。

【问题讨论】：

标签： javascript extjs layout multiple-columns extjs4.2

【解决方案1】：

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

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

【讨论】：

这实际上更适合我已经制作的；非常感谢您！

【解决方案2】：

您可以使用 hbox 和 vbox 布局解决此问题。重要的是 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()
});

【讨论】：

是否可以在按钮和 TextField 之间留出空格？
当然。您可以使用边距执行此操作，但如果您使用 hbox，我建议为“colspan”单元格设置另一个嵌套容器。这是 ExtJS 可以计算出准确的宽度。我编辑了我的示例。