Why is the button in my ExtJS grid appearing as "[object Object]"?

Question

In an ExtJS grid I have a column in which when the content of a cell is a certain value, a button should be displayed.

I define the column which will contain the button like this, which calls a rendering function:

{
    header: 'Payment Type',
    width: 120,
    sortable: true,
    renderer: renderPaymentType,
    dataIndex: 'paymentType'
}]

in the rendering function, I return either text or the button itself:

function renderPaymentType(val) {
    if(val!='creditInform') {
        return val;
    } else {
        return new Ext.Button({
            text: val,
            width: 50,
            handler: function() {
                alert('pressed');
            }
        });
    }
}

This basically works, except that the button is displayed as the text [object Object]:

What do I have to do so that the button is displayed as a button instead of as text?

Addendum

adding .getEl():

function renderPaymentType(val) {
    if(val!='creditInform') {
        return val;
    } else {
        return new Ext.Button({
            text: val,
            width: 50,
            handler: function() {
                alert('pressed');
            }
        }).getEl();
    }
}

produces a blank:

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 some kind of rendering problem with the rest of the code altough in Firebug I strangely don't get any errors:

Answer 1

Try

return new Ext.Button({
  text: val,
  width: 50,
  handler: function() {
    alert('pressed');
  }
}).getEl();

Your returning a JavaScript object to your renderer rather then a dom node. If doesn't work then your renderer expects a HTML string so you can try

Ext.Button({ ... }).getEl().parentNode.innerHTML

Either should solve your problem.