Results 1 to 3 of 3

Thread: Combobox renders valueField instead of displayField

  1. #1
    Sencha User
    Join Date
    Jun 2010
    Location
    India
    Posts
    17

    Question Combobox renders valueField instead of displayField

    Hi guys,

    I'm using ExtJS 3.2.1, and trying to create a grid view with ComboBox for options.

    This is how I'm creating a Combobox -

    Code:
    tools_getComboBox: function (column){
                var comb = new Ext.form.ComboBox({
                    // TODO: shows numbers after dirtying an area.
                    triggerAction: 'all',
                    mode: 'local',
                    lazyInit: false,
                    displayField: 'name',
                    valueField: '@value',
                    forceSelection: true,
                    typeAhead: true,
                    inputType:'text',
                    store: new Ext.data.JsonStore({
                        autoLoad: true,
                        url: this.base_url + "/options.json?field=" + column,
                        root: 'option',
                        fields:[
                            {
                                name:'@value',
                            },
                            {
                                name:'name',    // $ as key is incompatible with extjs
                                mapping:'$',
                            }
                        ]
                    }),
                });
                comb.on('change', function(combo, newValue, oldValue){
                    var record = combo.findRecord(combo.valueField, newValue);
                    console.log(record);
                    // combo.setValue(record.data.name); < fails
                    // combo.setValue("Foo"); < puts Foo everytime
                });
                return comb;
            },
    The remote json store "/options.json?field=foo" brings back a json in this format -

    Code:
    {
        "@name": "opt_pr_nationality",
        "@field": "opt_pr_nationality",
        "@id": "pr_person_opt_pr_nationality",
        "option": [
            {
                "@value": ""
            },
            {
                "@value": "1",
                "$": "Afghanistan"
            },
            {
                "@value": "2",
                "$": "Albania"
            },
            {
                "@value": "3",
                "$": "Algeria"
            },
    Where $ is mapped to 'name' used as displayField and @value as valueField for combobox.

    Now initially everything works fine, it displays country names as expected -

    http://twitpic.com/1z7v93/full

    The combobox transforms in edit mode and lets the user select -

    http://twitpic.com/1z7vba/full

    But as soon as one finishes the selection, the value represented changes into the numerical index -

    http://twitpic.com/1z7vd1/full

    ^ here the console has logged the record from 'change' event as in
    Code:
    var record = combo.findRecord(combo.valueField, newValue);
    console.log(record);
    I also tried fixing the value of combobox in change event itself trying to hack it, but still no use. Could you tell me where could've I gone wrong?

    Thanks

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    The combobox is not used when you are not editing the field. You'll have to create a renderer that displays the text instead of the value in the cell.

    The easiest method is using a combocolumn.

  3. #3
    Sencha User
    Join Date
    Jun 2010
    Location
    India
    Posts
    17

    Default

    Hey Condor,

    Thanks a lot that was really helpful. I observed that in Ext.util.Format.comboRenderer , combo.findRecord was failing, realized that as with remote json stores, they really need to be loaded before the comboRenderer acts up.

    So, now I'm just explicitly loading the store and am able to utilize comboRenderer

    Thanks a lot,

    ideamonk

Similar Threads

  1. [SOLVED!] ComboBox renders valueField instead of DisplayField upon form.load
    By JoyfulBobHome in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 25 Feb 2010, 2:00 PM
  2. combobox | displayField | valueField
    By thatcoder in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 30 Apr 2009, 3:11 PM
  3. valueField, displayField in ComboBox
    By sicher in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 14 Apr 2009, 11:18 AM
  4. Combobox on select, renders valueField instead of displayField
    By funcman in forum Ext 1.x: Help & Discussion
    Replies: 12
    Last Post: 2 Jul 2008, 7:10 PM
  5. Combobox valueField vs. displayField
    By momo in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 4 Jul 2007, 5:43 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •