extjs 4, Wie zu halten combobox in der grid-Zelle

Ich habe gesehen, ähnliche Fragen unbeantwortet bleiben anderswo. Ich möchte eine combobox in einer Spalte mit zwei Optionen (ASC, DEC). Ich will es zu zeigen, bis in jeder Zeile, oder wenigstens seinen Wert zeigen, wenn es nicht ausgewählt ist.

Ich weiß, dass es sich nicht um eine 'gute Idee' zu machen ein Kombinationsfeld in jeder Zeile, aber in diesem Fall weiß ich, dass es ein maximum von etwa 20 Zeilen, so sollte es nicht eine große Sache. Wenn dies nicht getan werden kann, will ich den ausgewählten Wert aus der combobox anzeigen. Momentan habe ich nur die comboboxes, die erscheinen, wenn ich auf eine Zeile klicken, das macht nicht viel Sinn, da Sie nicht sehen können Ihre Auswahl, es sei denn, Sie machen es. Was ist die Lösung?

Auch, ich möchte, um loszuwerden, ändern und Abbrechen-buttons, pop-up, wenn ich auf eine Zeile klicken, ich will einfach nur, um in der Lage zu Bearbeiten Sie die Zelle mit der combobox, und haben es automatisch ändern/speichern.

InformationsquelleAutor Bbb | 2012-09-07

  1. 8

    Können Sie einen Standardwert für die combo.

    Dass sollten dann die Rede, die beim Systemstart.

    Zellen verwenden renderer zu render die displayField des combo in Ihr raster. Folgenden als ein Beispiel, kann sein poster in einem der API-code-Boxen.

    Arbeiten JSFiddle

    Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields: ['name', 'email', 'phone', 'id'],
    data: {
        'items': [{
            "name": "Lisa",
            "email": "[email protected]",
            "phone": "555-111-1224",
            "id": 0
        }, {
            "name": "Bart",
            "email": "[email protected]",
            "phone": "555-222-1234",
            "id": 1
        }, {
            "name": "Homer",
            "email": "[email protected]",
            "phone": "555-222-1244",
            "id": 2
        }, {
            "name": "Marge",
            "email": "[email protected]",
            "phone": "555-222-1254",
            "id": 3
        }]
    },
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

//the renderer. You should define it within a namespace
var comboBoxRenderer = function(combo) {
    return function(value) {
        var idx = combo.store.find(combo.valueField, value);
        var rec = combo.store.getAt(idx);
        return (rec === null ? '' : rec.get(combo.displayField));
    };
}
//the combo store
var store = new Ext.data.SimpleStore({
    fields: ["value", "text"],
    data: [
        [1, "Option 1"],
        [2, "Option 2"]
    ]
});
//the edit combo
var combo = new Ext.form.ComboBox({
    store: store,
    valueField: "value",
    displayField: "text"
});


//demogrid
Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [{
        header: 'Name',
        dataIndex: 'name',
        editor: 'textfield'
    }, {
        header: 'Email',
        dataIndex: 'email',
        flex: 1,
        editor: {
            xtype: 'textfield',
            allowBlank: false
        }
    }, {
        header: 'Phone',
        dataIndex: 'phone'
    }, {
        header: 'id',
        dataIndex: 'id',
        editor: combo,
        renderer: comboBoxRenderer(combo)
    }],
    selType: 'cellmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});
    Über welche config: ich habe den Wert: 'ASC', und dass nicht tut den trick
    Ich bin drauf... hoffentlich Holen Sie es laufen... 😉
    dieser funktioniert. Verwenden Sie ein renderer, der verwendet die displayfield der combo zum Rendern der Anzeige ein Wert der combo zu Bearbeiten.
    Das ist genau so wie ich es auch tun
    Ich angepasst, diese werden mehr MVC-freundlich:code renderer: function (Wert, Metadaten-Datensatz, rowIndex, colIndex, store) { if (Wert == ") return ";code var combo =.Spalten[colIndex].getEditor(); var sto = Ext.getStore(combo.store); var idx = sto.finden(combo.valueField, value); var rec = sto.getAt(idx); return (rec === null || rec === undefined ? ": rec.bekommen(combo.displayField)); }

    InformationsquelleAutor sra

  2. 1
    {
    header: 'Your header',
    dataIndex: 'your Column',
    editor: {
        xtype: 'combobox',
        store: yourStore,
        queryMode: 'local',
        displayField: 'Your Display..',
        valueField: 'Your Value'
    }

    InformationsquelleAutor Reza

Schreibe einen Kommentar