Change valueField config on Ext-JS combobox?

Question

I have a combobox on a form where I need to reset its store along with the 'displayField' and 'valueField' configs.

Resetting the store via cmb.bindStore(newStore) works great.

Setting cmb.displayField = 'newfieldname'; also works great.

However, cmb.valueField = 'newValField'; does not work. The combo displays the right stuff, but when i select an item, the value is using the old valueField value, not the new one.

I've tried:

doing a cmb.reset() afterwards
Ext.apply(...)

Is it because valueField is somehow special because it is a required field? Is there some special way to set a config value on an Ext-JS component I don't know about or is it just not possible to change the value of 'valueField'?

FYI - Here is my code:

    comp.bindStore(Ext.create('Ext.data.Store', {
        fields : [ {
            name : 'abbr',
            type : 'string'
        }, {
            name : 'name',
            type : 'string'
        }, {
            name : 'slogan',
            type : 'string'
        } ],
        data : [ {
            "abbr" : "AL",
            "name" : "Alabama",
            "slogan" : "The Heart of Dixie"
        }, {
            "abbr" : "AK",
            "name" : "Alaska",
            "slogan" : "The Land of the Midnight Sun"
        }, {
            "abbr" : "AZ",
            "name" : "Arizona",
            "slogan" : "The Grand Canyon State"
        }, {
            "abbr" : "AR",
            "name" : "Arkansas",
            "slogan" : "The Natural State"
        }, ]
    }));

    comp.displayField = 'abbr';    // THIS WORKS
    comp.valueField = 'abbr';      // THIS DOESNT WORK

Are you using getValue? I ran your code with the Ext example with the valueField of 'name' and getValue worked. — pllee
Did you run it with valueField and displayField being 'name' first? If I do that, and then change valueField and displayField to be 'abbr' the pull down lists shows abbreviations, but when you select one, the name of the state ends up being displayed in the combo box. I'll try to find time to make a jsfiddle. — HDave
I did it from the example which had a tpland displayTpl and it worked. — pllee

sra sra · Accepted Answer · 2013-01-30T07:55:52

You are nearly there but you where looking at the wrong property cause valueField is not your issue, it is displayField. Your exact problem are preconfigured and cached properties. The first is the display template the second is the picker instance. You need to override the template and remove the picker instance. Here's a working snipped (JSFiddle)

In the example I added a second trigger with a cross. Hit it and the ComboBox get the new values. I recommend you to create your own component for this by extending from ComboBox and wrap all into a reconfigure method that would expect tree parameters.

Ext.onReady(function() {
    // The data store containing the list of states
    var states = Ext.create('Ext.data.Store', {
        fields: ['abbr', 'name'],
        data : [
            {"abbr":"AL1", "name":"Alabama1"},
            {"abbr":"AK1", "name":"Alaska1"},
            {"abbr":"AZ1", "name":"Arizona1"}
            //...
        ]
    });

    var comp = Ext.create('Ext.form.field.ComboBox', {
        fieldLabel: 'Choose State',
        id: 'combo-ident',
        trigger2Cls: 'x-form-clear-trigger',
        onTrigger2Click: function (args) {
            var comp = Ext.getCmp('combo-ident');
            comp.clearValue();
            comp.bindStore(Ext.create('Ext.data.Store', {
                fields : [ {
                    name : 'abbr',
                    type : 'string'
                }, {
                    name : 'name',
                    type : 'string'
                }, {
                    name : 'slogan',
                    type : 'string'
                } ],
                data : [ {
                    "abbr" : "AL",
                    "name" : "Alabama",
                    "slogan" : "The Heart of Dixie"
                }, {
                    "abbr" : "AK",
                    "name" : "Alaska",
                    "slogan" : "The Land of the Midnight Sun"
                }, {
                    "abbr" : "AZ",
                    "name" : "Arizona",
                    "slogan" : "The Grand Canyon State"
                }, {
                    "abbr" : "AR",
                    "name" : "Arkansas",
                    "slogan" : "The Natural State"
                }, ]
            }));

            comp.displayField = 'abbr';
            comp.valueField = 'name';
            comp.displayTpl = new Ext.XTemplate(
                '<tpl for=".">' +
                    '{[typeof values === "string" ? values : values["' + comp.displayField + '"]]}' +
                    '<tpl if="xindex < xcount">' + comp.delimiter + '</tpl>' +
                '</tpl>'
            );
            comp.picker = null;
        },
        store: states,
        queryMode: 'local',
        displayField: 'name',
        valueField: 'abbr',
        renderTo: Ext.getBody()
    });
    comp.on('select', function(){ console.log(arguments); console.log(arguments[0].getSubmitValue()); })

});

Change valueField config on Ext-JS combobox?

2 Answers