Edit gridrow with combo

HTML

<link rel="stylesheet" href="http://docs.sencha.com/ext-js/4-1/extjs-build/resources/css/ext-all.css">
<body class="flip-horizontal">
    
</body>

CSS

.flip-horizontal, .x-grid-cell-inner, .x-column-header-text, .x-panel-header-text {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: fliph; /*IE*/
    filter: fliph; /*IE*/
}

.x-column-header-text, .x-panel-header-text {
    display: inline-block;
}

JavaScript

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data: [
        {"name":"1", "email":"[email protected]", "phone":"555-111-1224"},
        {"name":"2", "email":"[email protected]", "phone":"555-222-1234"},
        {"name":"3", "email":"[email protected]", "phone":"555-222-1244"},
        {"name":"4", "email":"[email protected]", "phone":"555-222-1254"}
    ]
});


var names = Ext.create('Ext.data.Store', {
    fields: ['id', 'name'],
    data : [
        {"id":"1", "name":"Bart"},
        {"id":"2", "name":"Homer"},
        {"id":"3", "name":"Marge"},
        {"id":"4", "name":"Lisa"}
    ]
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        {header: 'Name',  dataIndex: 'name', editor: 'textfield',
             editor: {
                  xtype: 'combo',
                    store: names,
                    queryMode: 'local',
                    displayField: 'name',
                    valueField: 'id'
             },
            renderer: function(value) {
                var idx = names.find('id', value)
                var rec = names.getAt(idx);
                return rec.get('name');                    
            }         
        },
        {header: 'Email', dataIndex: 'email', flex:1,
            editor: {
                xtype: 'textfield',
                allowBlank: false
            }
        },
        {header: 'Phone', dataIndex: 'phone'}
    ],
    selType: 'rowmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToEdit: 1
        })
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});