javascript - ExtJs 4.1 中的布局

Question

嘿， 这是我的第一个问题，所以请对我好一点。 :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 尝试过，但不起作用。

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