Extjs布局表与字段上的colspan

Question

我在extjs中有一个简单的表单，我希望第一个字段在表格布局中占用2个空格：

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    title: 'Form Panel',
    bodyStyle: 'padding:5px 5px 0',
    width: 600,
    layout: {
        type: 'table',
        columns: 3,
        tableAttrs: {
            style: {
                width: '100%'
            }
        }
    },
    fieldDefaults: {
        labelAlign: 'top'
    },

    items: [{
        colspan: 2,
        xtype: 'textfield',
        fieldLabel: 'Field 1 Take 2 spaces',
    }, {
        xtype: 'textfield',
        fieldLabel: 'Field 2',
    }, {

        xtype: 'textfield',
        fieldLabel: 'Field 3',
    }, {
        xtype: 'textfield',
        fieldLabel: 'Field 4',
    }],

});

它不起作用。 看看这里：http://jsfiddle.net/Cfy8R/2/
UPADTE -1
例如

Answer 1

试试这个......

Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'Form Panel',
bodyStyle: 'padding:5px 5px 0',
width: 600,
layout: {
    type: 'table',
    columns: 3,
    tableAttrs: {
        style: {
            width: '100%'
        }
    }
},
fieldDefaults: {
    labelAlign: 'top'
},

items: [{
    xtype: textfield,
    colspan: 2,
    inputWidth: 300 // resize the input width
}, {
    xtype: 'textfield',
    fieldLabel: 'Field 2',
}, {

    xtype: 'textfield',
    fieldLabel: 'Field 3',
}, {
    xtype: 'textfield',
    fieldLabel: 'Field 4',
}],

}）;

Answer 2

您需要进行两项修改，首先是您需要的表格布局：

tableAttrs: {
    style: {
        width: '100%',
        tableLayout: 'fixed'
    }
}

然后在场地上你需要宽度100％：

{
    xtype: 'textfield',
    colspan: 2,
    width: '100%',
    inputWidth: 300 // resize the input width
}

HTH