Extjs Layout-Tabelle mit colspan, die auf einem für die Felder

Habe ich eine einfache form, in extjs, ich will das erste Feld zu nehmen 2 Plätze in der Tabelle layout:

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',
    }],

});

Es nicht funktioniert.
Schau mal hier: http://jsfiddle.net/Cfy8R/2/

UPADTE -1

Beispiel

Extjs Layout-Tabelle mit colspan, die auf einem für die Felder

InformationsquelleAutor SexyMF | 2014-01-22
  1. 0

    versuchen, diese...

    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',
}],

    });

    • Danke, aber dein Beispiel nicht funktioniert: jsfiddle.net/Cfy8R/5
    • wenn Sie ändern colspan zu 1 es wird funktionieren!
    • oder was meinst du zwei Räume zeichnen Sie einfach ein Muster an!
    • Hinzugefügt ein Bild
    • Jetzt habe ich verstanden, versuchen geänderten code. Sie können die Größe des textfield-Breite von inputWidth.
    InformationsquelleAutor Oğuz Çelikdemir
  2. 0

    Müssen zwei änderungen, zum einen auf dem Tisch layout, das Sie brauchen:

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

    dann auf dem Feld selbst müssen Sie width 100%:

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

    HTH

    InformationsquelleAutor Black
Schreibe einen Kommentar