Question

HY，这是我的第一个问题所以请对我好。：d

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

基本上我想要一个像：

这样的布局

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

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

那些Buttons和TextFields在

中

＆＃13;

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

＆＃13;

我用colspan尝试了它，但它没有工作。

Answer 1

您可以使用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()
});

Answer 2

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

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中的布局

2 个答案: