Within an ExtJS grid, I am facing a scenario where I need to display a button in a specific column when the content of a cell meets certain criteria.
To achieve this, I define the column with the button using a rendering function as shown below:
{
header: 'Payment Type',
width: 120,
sortable: true,
renderer: renderPaymentType,
dataIndex: 'paymentType'
}]
Inside the rendering function, I determine whether to return text or the actual button:
function renderPaymentType(val) {
if(val!='creditInform') {
return val;
} else {
return new Ext.Button({
text: val,
width: 50,
handler: function() {
alert('pressed');
}
});
}
}
The functionality is working correctly, but the button appears as the text [object Object]:
How can I ensure that the button is displayed as an actual button instead of text?
Addendum
When adding .getEl():
function renderPaymentType(val) {
if(val!='creditInform') {
return val;
} else {
return new Ext.Button({
text: val,
width: 50,
handler: function() {
alert('pressed');
}
}).getEl();
}
}
This results in a blank output:
Further tweaking by adding .getEl().parentNode.innerHTML:
function renderPaymentType(val) {
if(val!='creditInform') {
return val;
} else {
return new Ext.Button({
text: val,
width: 50,
handler: function() {
alert('pressed');
}
}).getEl().parentNode.innerHTML;
}
}
causes issues with the rendering and complicates troubleshooting without any visible errors in Firebug: