ExtJS How to force render on grid row after combo editor select

Question

I have in my ExtJS 4.2.1 Application a grid with the following editable column:

text: 'Location',
    dataIndex: 'LocationId',
    width: 140,
    renderer: function(value) {
        var record = me.store.findRecord('LocationId', value);
        return record.get('Description');
    },
    editor: {
        xtype: 'combobox',
        typeAhead: true,
        triggerAction: 'all',
        store: Ext.create('App.store.catalog.Location', {
            autoLoad: true
        }),
        displayField: 'Description',
        valueField: 'LocationId',
        listConfig: {
            width: 250,
            loadingText: 'Searching...',
            // Custom rendering template for each item
            getInnerTpl: function() {
                return '<b>{Code}</b><br/>(<span style="font-size:0.8em;">{Description}</span>)';
            }
        }
    }

The combo has a renderer to display the Description of the LocationId selected.

Then, my grid has the feature 'Ext.grid.plugin.CellEditing' so I can edit just that column cell.

enter image description here

The problem that I have is when I press the "Update" button, the combo display value returns to the original it used to have, even if the LocationId in the record has the right value.

This is my code that gets fired when the user press the "Update" button.

me.rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
    clicksToMoveEditor: 1,
    autoCancel: false,
    listeners: {
        edit: function(editor, e) {
            var record = e.record;

            me.setLoading('Updating...');

            App.util.Ajax.request({
                noMask: true,
                url: '/api/catalog/UpdateEmployeeLocation',
                jsonData: record.getData(),
                success: function(response, opts) {

                    var obj = Ext.decode(response.responseText);
                    if (obj.success) {

                        // commit changes (no save just clear the dirty icon)
                        me.getStore().commitChanges();
                    }
                },
                callback: function() {
                    me.setLoading(false);
                }
            });

        }
    }
});

The record is saved correctly in my database but the combo display value is not updated with the description that corresponds to the LocationId. If I reload the store from server again then It shows correctly.

So, there is something wrong with the renderer in my column that is not updating the value after I update my record.

Any clue on how to get around this?

Thanks.

Bala Bala · Accepted Answer · 2014-09-15T08:03:18

You are setting dataIndex as 'LocationId' but no where you are changing the 'LocationId', you are just changing description and updating it in rendered method. Since there no change in 'LocationId', store doesn't consider it as dirty field and hence rendered function is not getting called. One quick and dirty way could be instead of using 'LocationId', create another field in the model say 'LocationIdchangeTraker'. Use 'LocationIdchangeTraker' instead of 'LocationId' in data index. It doesn't not effect your view because you are changing the value in reneerer function. Now whenever you update the function change the value of 'LocationIdchangeTraker' as shown below.

record.set('LocationIdchangeTraker',Ext.getId());

ExtJS How to force render on grid row after combo editor select

1 Answers