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
– pllee, Commented Jan 30, 2013 at 0:46
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. — Dave
– Dave, Commented Jan 30, 2013 at 2:43
I did it from the example which had a tpland displayTpl and it worked. — pllee
– pllee, Commented Jan 30, 2013 at 4:04

sra · Accepted Answer · 2013-01-30 07:55:52Z

1

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()); })

});

answered Jan 30, 2013 at 7:55

sra

24k8 gold badges59 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dave Over a year ago

Your answer is right on the money...and thanks for the JSFiddle. a couple follow-up questions out of curiosity: Why isn't there a setter for every config in extjs that does the Right Thing? How on earth was I supposed to ever figure this out without help from someone like you? It's like hidden tribal knowledge...

sra Over a year ago

Hi @HDave and thanks for accepting :) Now to your question; Well, I guess the point here is the amount of initialisation that happens here and in addition I think you don't had a common problem. See the reconfigure function on the grid. This was sort of common need and got therefore implemented. I think the important point is that once you a grip on the framework you can customize nearly everything. But you will just find common use in the API, for the rest you have to look under the hood (at the source). But I must admit yes for some things you will need bits of tribal knowledge ;)

dbrin · Accepted Answer · 2013-01-30 00:47:53Z

1

I am not sure it is possible to reconfigure the combo box this way, but perhaps you can create another combobox with a different store and valueField. Hide/destroy one or the other based on your logic.

answered Jan 30, 2013 at 0:47

dbrin

15.7k4 gold badges59 silver badges85 bronze badges

Collectives™ on Stack Overflow

Change valueField config on Ext-JS combobox?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related