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