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.

Answer 2

This worked for me:

renderer: function (v, m, r) {
  var id = Ext.id();
  Ext.defer(function () {
    Ext.widget('button', {
      renderTo: id,
      text: 'Edit: ' + r.get('name'),
      width: 75,
      handler: function () { Ext.Msg.alert('Info', r.get('name')) }
    });
  }, 50);
  console.log(Ext.String.format('<div id="{0}"></div>', id));
  return Ext.String.format('<div id="{0}"></div>', id);
}

Ref: http://ext4all.com/post/how-add-dynamic-button-in-grid-panel-column-using-renderer

Answer 3

When ever you see syntax of that nature, chances are you're looking at the output of the toString method on an object.

Which means you're displaying the object, and not a result.

console.log({
 toString:function(){
   return 'toString method.'
 };
});
console.log(new Object())
Object.prototype.toString = function(){
 return 'All object to string methods are now overriden.';
}
console.log(new Object());

Answer 4

the API documentation says this

renderer : Mixed For an alternative to specifying a renderer see xtype Optional. A renderer is an 'interceptor' method which can be used transform data (value, appearance, etc.) before it is rendered). This may be specified in either of three ways:

• A renderer function used to return HTML markup for a cell given the cell's data value.

• A string which references a property name of the Ext.util.Format class which provides a renderer function.

• An object specifying both the renderer function, and its execution scope (this reference) e.g.:

  { fn: this.gridRenderer, scope: this }

You're using the renderer function option, which means your function needs to return a html markup string, rather than a new Button object. To show a button, you might need to use the column's editor property