javascriptextjs

How to return icon in row cell after API response in ExtJs


I've been trying to return an alert icon in every row cell where the api response's log level is 0 but I only end up with a [object Promise] instead of the icon itself. I log the data.logLevel and it shows the right log level. I'm doing all this in the renderer, with a function from the store. Can anyone tell me why this is not working and things I could try to make it work?

I have my column here:

{
text: 'isLow',
flex: 1,
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
    return new Promise(function (resolve, reject) {
        store.sendConfigTaskRequest2(record.get('jobId'))
            .then(function (response) {
                var data = Ext.decode(response.responseText);
                if (data.logLevel === 0) {
                    var html = '<div class="u4f-backgroundjobs-alert-icon" style="display: block; margin: 0 auto; height: 20px; width: 20px;" title="Full Log Activated!"></div>';
                    resolve(html);
                } else {
                    resolve('');
                }
            })
            .catch(function (error) {
                reject(error);
            });
    }).then(function (html) {
        // Return the resolved HTML to display the icon
        return html;
    });
},
align: 'center',
draggable: false,
resizable: false

}

And I have my "sendConfigTaskRequest2" in the store like this:

    sendConfigTaskRequest2: function (jobId) {
    var me = this;

    return new Promise(function (resolve, reject) {
        Ext.Ajax.request({
            url: U4.data.proxy.UrlTemplate.replaceParameters({
                jobId: jobId,
            }, me.proxy.api.config),
            jsonData: JSON.stringify({
                jobId: jobId
            }),
            method: 'GET',
            success: function (data) {
                resolve(data);
            },
            failure: function (data) {
                reject(data);
            }
        });
    });
},

Any input would be appreciated.


Solution

  • It can be achieved using the dependent renderer approach.

    Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/3n4g

       Ext.define('PersonnelModel', {
                extend: 'Ext.data.Model',
    
                fields: [
                    'name', 'email', 'phone',
    
                    {
                        name: 'icon',
                        persist: false
                    }
                ]
            });
    
            Ext.define('PersonnelStore', {
                extend: 'Ext.data.Store',
    
                alias: 'store.personnel',
    
                model: 'PersonnelModel',
    
                data: {
                    items: [{
                        name: 'Jean Luc',
                        email: "jeanluc.picard@enterprise.com",
                        phone: "555-111-1111"
                    }, {
                        name: 'Worf',
                        email: "worf.moghsson@enterprise.com",
                        phone: "555-222-2222"
                    }, {
                        name: 'Deanna',
                        email: "deanna.troi@enterprise.com",
                        phone: "555-333-3333"
                    }, {
                        name: 'Data',
                        email: "mr.data@enterprise.com",
                        phone: "555-444-4444"
                    }]
                },
    
                proxy: {
                    type: 'memory',
                    reader: {
                        type: 'json',
                        rootProperty: 'items'
                    }
                }
            });
    
            Ext.create({
                xtype: 'grid',
                renderTo: Ext.getBody(),
                store: {
                    type: 'personnel'
                },
                columns: [{
                    text: 'Name',
                    dataIndex: 'name'
                }, {
                    text: 'Email',
                    dataIndex: 'email',
                }, {
                    text: 'Phone',
                    dataIndex: 'phone',
                    renderer: function (value, metaData, record) {
                        // Replace with AJAX call
                        Ext.defer(function () {
                            // on successful/fail cases update the record property
                            // internally it will call the renderer method of `isLow`
                            // column
                            record.set('icon', 1);
                        }, 1500);
    
                        return value;
                    }
                }, {
                    text: 'isLow',
                    dataIndex: 'icon',
                    flex: 1,
                    renderer: function (value, metaData, record) {
                        // Format value her
                        if (value) {
                            return '<div class="fa fa-search" style="display: block; margin: 0 auto; height: 20px; width: 20px;" title="Full Log Activated!"></div>';
                        } else {
                            return 'Loading...';
                        }
                    }
    
                }],
            });