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().parentNo开发者_StackOverflow中文版de.innerHTML;
    }
}

causes some kind of rendering problem with the rest of the code altough in Firebug I strangely don't get any errors:

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.

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

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

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