ExtJS: EditorGridPanel and ComboBox trouble

Question

I'm having little trouble with extJS and EditorGridPanel.

I created EditorGridPanel with editions columns: one of them editable. The Editor of this column works correctly, but when I check some field in combo on gridePanel, it inserts a "bad" value.

This is my code:

this.grid = new Ext.grid.EditorGridPanel({
    frame: true,
    autoHeight: true,
    id: 'grid-editMc',
    clicksToEdit: 1,
    loadMask: true,
    columnLines: true,
    store: this.getStore(),
    sm: selmode,
    cm: new Ext.grid.ColumnModel({
        columns: [{
            header: 'Преподаватель',
            css: 'vertical-align:middle;',
            dataIndex: 'teacher',
            sortable: false,
            editor: this.teacherEdit()
        }],

        defaultSortable: true
    }),
})

For example, in the store I have record: id:4, teacher:'Mark'. When I change combo in the grid cell insert 4 (not 'Mark'). I want to have a cell value 'id' and text 'teacher'.

Matt Broekhuis Matt Broekhuis · Accepted Answer · 2011-01-26T16:01:52

you need a renderer for your combo box.

on the column model, add a renderer for the item with the combobox

 [
        {
            header: 'Преподаватель',
            css:'vertical-align:middle;',
            dataIndex: 'teacher',
            sortable: false,
            editor: this.teacherEdit(),
                renderer:teacherRenderer

        }
    ]

then return the value that you want for the passed in value. Instead of returning a constant here, you can get a field off of the record, or do a lookup on your store to get the value you want to display.

var teacherRenderer = function(value,metaData,record){
       // try record.data.teacher here
       return "displayValue"

}

ExtJS: EditorGridPanel and ComboBox trouble

1 Answers