Question

I have ExtJS Grid. And I am using Roweditor plugin with combobox. When I click on any row of the Grid, I can see the Editor with Update and Cancel button.

Now the problem that I am facing is when I click on the Row and the row editor gets enabled, If the currently displayed value is matched with the combo store, then it should show as selected, but it is not showing that. If I use the value for both valueField and displayField then I can see it selected.

I guess I can not post the images so I am giving you the code here:

If I use the value for both valueField and displayField in the Combo’s Store, then I can see the selected value.

editor: {
    allowBlank: true,
    selectOnFocus:true,
    editable:true,
    xtype:'combobox',
    valueField:'id',
    displayField:'status',
    triggerAction:'all',
    queryMode: 'local',
    store:[['NOT_STARTED','NOT_STARTED'],
           ['IN_PROGRESS','IN_PROGRESS'],
           ['COMPLETED','COMPLETED']
    ],
    value:0,
    lazyRender: true
}

When I assign displayField and valueField differently in the Combo’s Store, which is the ideal case, it is not showing me the selected.

editor: {
    allowBlank: true,
    selectOnFocus:true,
    editable:true,
    xtype:'combobox',
    valueField:'id',
    displayField:'status',
    triggerAction:'all',
    queryMode: 'local',
    store:[['1','NOT_STARTED'],
           ['2','IN_PROGRESS'],
           ['3','COMPLETED']
    ],
    value:0,
    lazyRender: true
}

Please tell me what is wrong here.

---

Hi Thanks for the reply, I have done the changes as you suggest , but somehow it didn’t work for me. Here is Code. My store is

 var data = {
            root: [
                                                {
                                                    "objectType":"com.yagna.common.domain.Project",
                                                    "objectId":"3072",
                                                    "expectedEndDate":"",
                                                    "startDate":"2011-06-27 13:06:00.0",
                                                    "name":"Milestone-11",
                                                    "actualEndDate":"",
                                                    "id":"4376",
                                                    "Status":"NOT_STARTED"
                                                }] };  

                                                                                     my Column is 

{id: 'Status',width: 20,text: 'Status',dataIndex: 'Status',filter: {type: 'combobox'},sortable: true, groupable: false,
        editor:{
                allowBlank: true,
                xtype:'combobox',
                valueField:'field1',
                displayField:'field2',
                triggerAction:'all',
                mode: 'local',
                store: [['0','NOT_STARTED'],['1','IN_PROGRESS'],['2','COMPLETED']],
                value:0,
                lazyRender: true
            } },   

                                                   Please suggest what is missing here

Answer 1

“If the currently displayed value is matched with the combo store, then
it should show as selected, but it is not showing that”

A combobox doesn’t match with the displayField value it matches with the valueField value.

A combobox datastore that is hardcoded like yours will automatically take the first item (e.g. ‘1’) as the valueField and the second item (e.g. ‘NOT_STARTED’) as the displayField.

Because none of the “number” values (‘1′,’2′,’3’) match to the values in this column (“NOT_STARTED”, “IN_PROGRESS”, “COMPLETED”) it wont show you anything.

Unless I understood this wrongly, it sounds like the datastore for the grid itself contains this “status” column data (or whatever you call this column) as a string and not a number (i.e. “NOT_STARTED”, “IN_PROGRESS”, “COMPLETED” instead of 1, 2, 3).

You can do two different things:

EASIEST: Just leave the value field as a string don’t make it a number.

HARDER: If you really need this to be a number for some (unstated) reason:

1. You change the data in the grid datastore so that all the data
   for this column is a number (1,2,3) instead of a string.
2. Add a renderer config to this column to show the numbers as the
   appropriate strings when a row is not being edited.
3. Then, do it the way you are trying to with the data store set-up as
   [number - string] objects. Also, take the number out of quotes in your store if
   you are going to do it that way.

Of course if you are already using a renderer config on this column the problem may simply be that you have the number in quotes.

Hopefully this all makes sense.

EDIT:

Here is the code.

First, put the status elements in a seperate store – like so:

var statusStore = Ext.create('Ext.data.SimpleStore', {
    fields: ['id', 'status'],
    data : [
        ['0', 'NOT_STARTED'],
        ['1', 'IN_PROGRESS'],
        ['2', 'COMPLETED']
    ]
});

Second, change the value of “status” to the number string you wanted (“0”)

var data = {
    root: [{
        "objectType":"com.yagna.common.domain.Project",
        "objectId":"3072",
        "expectedEndDate":"",
        "startDate":"2011-06-27 13:06:00.0",
        "name":"Milestone-11",
        "actualEndDate":"",
        "id":"4376",
        "Status":"0"
    }]
};  

Third, add a renderer to your column config and change the store specified in the editor to be the one we created above instead (statusStore).

{
    id: 'Status',
    width: 20,
    text: 'Status',
    dataIndex: 'Status',
    filter: {type: 'combobox'},
    sortable: true, 
    groupable: false,
    // add this renderer
    renderer: function(value) {
        var idx = statusStore.find('id', value)
        var rec = statusStore.getAt(idx);
        return rec.get('status');                    
    },
    editor:{
        allowBlank: true,
        xtype:'combobox',
        valueField:'field1',
        displayField:'field2',
        triggerAction:'all',
        mode: 'local',
        // change this store to refer to the one we created
        store: statusStore,
        value:0,
        lazyRender: true
    }
},       

If this pans out for you, don’t forget to mark the check for the answer at the left.