如何从API获取对象属性并通过匹配字段将其设置到存储

Question

我正在尝试从 API 请求中获取对象列表，将其属性“loglevel”添加到我的商店中并将其显示在现有表中，将这些日志级别链接到每个“jobId”，但我在这样做时遇到了麻烦。希望它在打开页面时请求一次，以便值与数据库保持同步。 这是我的模型：

Ext.define('U4.fundamentals.backgroundjobs.model.BackgroundJobsMonitoringModel', {  
extend: 'Ext.data.Model',
fields: [
    { name: 'jobId', type: 'string', mapping: 'jobId'},
    { name: 'taskId', type: 'string', mapping: 'lastTaskRun.taskId'},
    { name: 'updatedAt', type: 'date', mapping: 'lastTaskRun.updatedAt'},
    { name: 'status', type: 'string', mapping: 'lastTaskRun.status'},
    { name: 'canRunOnDemand', type: 'boolean', defaultValue: true },
    { name: 'icon', persist: false },
    { name: 'logLevel', type: 'int'}
]});

这是我在商店中的 api 请求配置：

 proxy: {
    type: 'rest',
    api: {
        read: U4.getApiPath('server-jobs'),
        run: U4.getApiPath('server-jobs'),
        kill: U4.getApiPath('server-jobs/{jobId}/{taskId}/kill'),
        config: U4.getApiPath('server-jobs-configuration/loglevel/{jobId}'),
        async: U4.getApiPath('server-jobs-configuration/loglevel')
    },

sendConfigTaskRequest3: function () {
    var me = this;

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

该请求不接受任何参数，因为它是 getallasync 方法。

我尝试在控制器中设置一个函数并通过渲染和渲染后监听器调用它，但到目前为止还没有工作：

onConfigTaskRequestSuccess: function (grid, response) {
    var me = this;
    var store = grid.getStore();
    store.sendConfigTaskRequest3()
        .then(function (response) {
            var data = Ext.decode(response.responseText); // Decode the response

            // Loop through the data and set the LogLevel property for each row in the store
            Ext.each(data, function (item) {
                var record = store.findRecord('jobId', item.JobId); // Find the record in the store based on the jobId
                if (record) {
                    record.set('logLevel', item.LogLevel); // Set the LogLevel property of the record
                }
            });
        })
        .catch(function (error) {
            // Handle errors here
        });
},

如有任何帮助，我们将不胜感激。

更新#1： 这个“jobId”列和“loglevel”列渲染上的依赖渲染示例完全符合我的要求，但它对每一行发出相同的请求。如果您能告诉我一种方法，只向 API 发出一个请求并获得相同的结果，那就完美了，因为我真的无法发送此信息，因为每次打开页面时都有如此多的请求。这是 jobId 上的渲染器：

renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
            Ext.defer(function () {

                var promise = store.sendConfigTaskRequest3();

                return new Promise(function (resolve, reject) {
                    promise.then(function (response) {
                        var data = Ext.decode(response.responseText);
                        Ext.each(data, function (item) {
                            var record = store.findRecord('jobId', item.jobId); // Find the record in the store based on the jobId
                            if (record) {
                                console.log("record log", item.jobId, item.logLevel);
                                record.set('logLevel', item.logLevel); // Set the LogLevel property of the record
                                console.log(record.get('logLevel'), "RECORD LOG");
                                resolve(true);
                            }
                        });
                    }).catch(function (error) {
                        reject(error);
                    })
                });
                
            }, 1500);

            return value;
        }

取决于 jobId 渲染器的渲染器（日志级别）：

{
        text: 'LowSignal',
        flex: 1,
        dataIndex: 'logLevel',
        renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
            if (value === 0) {
                return '<div class="u4f-backgroundjobs-alert-icon" style="height: 20px; width: 20px; margin:0px 43.33%" title="Full Log Activated!"></div>';
            } else {
                return 'Loading...';
            }
        },
        align: 'center',
        draggable: false,
        resizable: false,
    }

Answer 1

我最终在 viewconfig 中实现了 API 调用，因为它在渲染后或渲染前不起作用。同样在渲染器函数中它可以工作，但它会调用我不想要的表的每一行。 它最终在网格的视图配置中看起来像这样：

viewConfig: {
    listeners: {
        viewready: function (view, store) {
            var ran = false;
            var store = view.grid.getStore();
            if (!ran) {
                Ext.defer(function () {

                    var promise = view.grid.getStore().sendConfigTaskRequest3();

                    return new Promise(function (resolve, reject) {
                        promise.then(function (response) {
                            var data = Ext.decode(response.responseText);
                            Ext.each(data, function (item) {
                                var record = view.grid.getStore().findRecord('jobId', item.jobId); // Find the record in the store based on the jobId
                                if (record) {
                                    console.log("record log", item.jobId, item.logLevel);
                                    record.set('logLevel', item.logLevel); // Set the LogLevel property of the record
                                    console.log(record.get('logLevel'), "RECORD LOG");
                                    resolve(true);
                                }
                            });
                        }).catch(function (error) {
                            reject(error);
                        })
                    });

                }, 1500);
                ran = true;
                return;
            }
        }
    }
},