ExtJs Grid populating a column through ajax in renderer

Question

I have a ExtJs grid with three columns (with the third column being status). The first two columns are loaded to store and populated in grid. And the third column depends on the first two columns. I cannot create a new store for the third column.

Is it possible to make ajax call in renderer to populate the third column? I know that renderer is synchronous. Is there any way to achieve this? Any example is highly appreciated.

function renderStatus(value) {
    var statusAjaxOnSuccessCallback = function (serverStatus) {
        //debugger;           

        grid.getStore().each(function (rec) {
           rec.set('Status', 'After Ajax');               
        });            
    };
    callAjax(statusAjaxOnSuccessCallback);
    //return 'BeforeAjax';
}

score 1 · Answer 1 · answered Mar 09 '15 at 17:53

1

Just configure your grid in the normal way with the third grid column bound to the dataIndex of your third column in the store.

Whenever you set the value of the third column for the rows in your store, which you can do through an AJAX success handler, the grid will automatically update and show that new value.

answered Mar 09 '15 at 17:53

mindparse

6,115
27
90
191

I added renderer function of the third column above. I am updating the store but it is not reflecting in the UI. Am I missing something? – Kannan D Mar 10 '15 at 07:17
When are calling that renderStatus function? – mindparse Mar 10 '15 at 07:38
columns: [ selectorModel, { header: 'Name', width: 300, sortable: true, dataIndex: 'Name', renderer: renderName }, { header: 'Dept', width: 300, sortable: true, dataIndex: 'Dept', renderer: renderDept }, { header: 'Status', width: 250, sortable: true, dataIndex: 'Status', renderer: renderStatus } ] – Kannan D Mar 10 '15 at 08:59
It is called from the column mapping as pasted above. – Kannan D Mar 10 '15 at 09:00

score 0 · Answer 2 · answered Mar 13 '15 at 09:42

Here is how I solved the problem.

Subscribe to load event of the grid's store.
In that event, trigger ajax query to get value for the third column.
In the onsuccess event of the ajax query, update the grid's store and the value gets rendered automatically.
Set markDirty of the grid's viewconfig to false so that the column does not display the dirty mark.

ExtJs Grid populating a column through ajax in renderer

2 Answers2