combo setdisplayfield

by Johan Vandeplas

HTML

<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.1/resources/css/ext-all.css">
<script src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-all-dev.js"></script>

JavaScript

// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name', 'names'],
    data : [
        {"abbr":"AL", "name":"Alabama", "names": "test1"},
        {"abbr":"AK", "name":"Alaska", "names": "test2"},
        {"abbr":"AZ", "name":"Arizona", "names": "test3"}
        //...
    ]
});

// Create the combo box, attached to the states data store
combo = Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose State',
    store: states,
    queryMode: 'local',
    displayField: 'name',
    valueField: 'abbr',
    setDisplayField: function(displayField){
        var me = this,
            val = me.getValue(),
            isExpanded = me.isExpanded;
        
        me.displayField = displayField;
        me.displayTpl = new Ext.XTemplate(
            '<tpl for=".">' +
                '{[typeof values === "string" ? values : values["' + me.displayField + '"]]}' +
                '<tpl if="xindex < xcount">' + me.delimiter + '</tpl>' +
            '</tpl>'
        );
        if(isExpanded){ me.collapse(); }
        me.picker = me.createPicker();
        if(isExpanded){ me.expand(); }
        combo.setValue(val);
    }
});

Ext.create('Ext.form.Panel', {
    items: combo,
    renderTo: Ext.getBody()
});

setTimeout(function(){
    combo.setDisplayField('names');
    console.log('names');
    setTimeout(function(){
        combo.setDisplayField('name');
        console.log('name');
    },5000);
},5000);