ExtJs API响应后如何返回行单元格图标

4dc9hkyq 于 2023-03-22 发布在其他

关注(0)|答案(1)|浏览(100)

我一直在尝试在API响应的日志级别为0的每个行单元格中返回一个alert图标，但我最终只得到一个[object Promise]而不是图标本身。我记录了data.logLevel，它显示了正确的日志级别。我在渲染器中使用商店中的函数完成了所有这些。有人能告诉我为什么这不起作用吗？我可以尝试让它起作用吗？
我的专栏在这里：

{
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

}
我在商店里有我的“sendConfigTaskRequest2”，如下所示：

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);
            }
        });
    });
},

欢迎提供任何意见。

extjs

来源：https://stackoverflow.com/questions/75800541/how-to-return-icon-in-row-cell-after-api-response-in-extjs

1条答案

按热度按时间

byqmnocz1#

它可以使用依赖渲染器方法来实现。
小提琴：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...';
                    }
                }

            }],
        });

赞(0）回复(0）举报 2023-03-22

我来回答

ExtJs API响应后如何返回行单元格图标

1条答案

相关问题

热门标签

最新问答