Extjs4, How to set displayField in combo editor?

by el_chief

HTML

<link rel="stylesheet" href="//extjs.cachefly.net/ext-4.1.0-gpl/resources/css/ext-all-gray-debug.css" />
<script src="//extjs.cachefly.net/ext-4.1.0-gpl/ext-all-dev.js"></script>

JavaScript

/* this is a function to simulate ajax requests in jsfiddle */
function sim(proxy, data, delay) {
    if (typeof data !== 'string') {
        data = Ext.JSON.encode(data);
    }

    proxy.url = '/echo/json/';
    proxy.actionMethods.read = "POST";
    proxy.extraParams.json = data;
    proxy.extraParams.delay = typeof delay == 'undefined' ? 0 : delay;
}

Ext.define('MyStore', {
    extend:'Ext.data.Store',
    fields:['id','name'],
    proxy:{
        url:'whatever',
        type:'ajax',
        reader:{
            type:'json'
        }
    }
});

var myStore = new MyStore();

/* return fake data to myStore: */
sim(myStore.proxy, [{id:2,name:'neil'},{id:3,name:'expert wanna-be'}], 0);

Ext.define('MyForm', {
    extend: 'Ext.form.Panel',

    title: 'My Form',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'combobox',
                    editable:false,
                    store: myStore, 
                    triggerAction:'all',
                    valueField: 'id',
                    displayField:'name'
                }
            ]
        });

        me.callParent(arguments);
    }
});

var myForm = new MyForm({renderTo:Ext.getBody()});

var combo = myForm.down('combobox');

combo.store.add({id:3, name:'expert wanna-be'});
combo.setValue(3);