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

Question

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

I define a column that will contain a button that calls the render function :

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

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

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 text [object Object] :

What do I need to do to make the button appear as a button and not as text?

Adding

addition .getEl():

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

creates blank :

addition .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;
    }
}

Firebug I, :

Answer 1

Try

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

JavaScript , dom node. , HTML,

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

.

Answer 2

:

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);
}

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

Answer 3

, , toString .

, , .

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

API

renderer: Mixed . xtype . , (, , ..) ). :

• , HTML .

• , Ext.util.Format, .

• , ( ), :

  {         fn: this.gridRenderer,          scope: this    }

You are using a render function function, which means your function should return an html markup line, not a new Button object. To show the button, you may need to use the editorcolumn property