extJs - GridPanel with combobox cell editing

Question

I have a grid panel populated from local store. I added combo box for editing type cell. I want my combo box to be populated from a remote source. But I can't make it load any data. Here is my code:

Ext.define('System.view.MainTab.NewConnection.Contacts', { extend: 'Ext.grid.Panel', alias: 'widget.newConnectionContactsPanel',

requires: [
    'Ext.grid.View',
    'Ext.grid.column.Column',
    'Ext.form.field.ComboBox',
    'Ext.toolbar.Toolbar',
    'Ext.toolbar.Fill',
    'Ext.button.Button',
    'Ext.grid.plugin.RowEditing'
],

height: 250,
width: 400,
itemId: 'contactsGridPanel',
title: 'My Grid Panel',

initComponent: function() {
    var records = [];
    var store = new Ext.data.ArrayStore({
        fields: [
            {name: 'type'},
            {name: 'value'}
        ]
    });

    store.loadData(records);
    var me = this;

    Ext.applyIf(me, {
        columns: [
            {
                dataIndex: 'type',
                xtype: 'gridcolumn',
                text: 'Type',
                flex: 1,
                editor: {
                    xtype: 'combobox',
                    displayField: 'neme',
                    valueField: 'id',
                    queryMmode: 'remote',
                    store: new Ext.data.JsonStore({
                        proxy: {
                            type: 'ajax',
                            url: '/ws/rest/contacts/getKeywords.json?keywordType=CONTACTS',
                            reader: {
                                type: 'json',
                                root: 'data',
                                idProperty: 'id'
                            }
                        },
                        autoLoad: true,
                        fields: [
                            {type: 'integer', name: 'id'},
                            {type: 'string', name: 'name'}
                        ]
                    })

                }
            },
            {
                dataIndex: 'value',
                xtype: 'gridcolumn',
                text: 'Value',
                flex: 1,
                editor: {
                    xtype: 'textfield'
                }
            }
        ],
        dockedItems: [
            {
                xtype: 'toolbar',
                dock: 'bottom',
                items: [
                    {
                        xtype: 'tbfill'
                    },
                    {
                        xtype: 'button',
                        itemId: 'removeBtn',
                        text: 'Remove'
                    },
                    {
                        xtype: 'button',
                        itemId: 'addBtn',
                        text: 'Add',
                        listeners: {
                            click: function (button, e, eOpts) {
                                var grid = button.up('#contactsGridPanel');
                                var store = grid.getStore();

                                var rowEditing = grid.getPlugin('rowediting');
                                rowEditing.cancelEdit();
                                var record = store.add({})[0];

                                rowEditing.startEdit(record, 0);
                            }
                        }
                    }
                ]
            }
        ],
        plugins: [
            Ext.create('Ext.grid.plugin.RowEditing', {
                pluginId: 'rowediting',
                listeners: {
                    edit: function() {

                    }
                }
            })
        ]
    });

    me.callParent(arguments);
}

});

Here is a json response I get from the server:

{
  "success": true,
  "data": [
    {
      "id": 1,
      "name": "Fax"
    },
    {
      "id": 2,
      "name": "Home page"
    }
  ]
}

Can't make it all work. The combo box is empty. What am I doing wrong?

Answer 1

The most likely is that you have a typo in your displayField config.

As a side note, you should really say what kind of debugging you've done. Saying you "can't make it work" doesn't really help. Does the request hit the server? Does the store get data in it? Mentioning what you've done would help someone answering you.

Answer 2

You should catch the column Values from your remote source. Try adding the mapping attribute.

autoLoad: true,
fields: [
   {type: 'integer', name: 'id', **mapping:'id'**},
   {type: 'string', name: 'name', **mapping :'name'**}
]