为什么我的ExtJS网格中的按钮显示为“[object Object]”？

Question

在 ExtJS网格中，我有一个列，当单元格的内容为特定值时，应显示按钮。

我定义了包含这样的按钮的列，它调用渲染函数：

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

在渲染功能中，我返回文字或按钮本身：

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

这基本上有效，除了按钮显示为文本 [对象] ：

我该怎么办才能将按钮显示为按钮而不是文字？

附录

添加.getEl()：

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

生成空白：

添加.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中导致其他代码出现某种渲染问题我奇怪地没有出现任何错误：

Answer 1

尝试

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

将JavaScript对象返回到渲染器而不是dom节点。如果不起作用，则渲染器需要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 documentation说明了这个

  

渲染器：混合替代   指定渲染器请参阅xtype   可选的。渲染器是一个   可以使用“拦截器”方法   转换数据（价值，外观，   等）在呈现之前）。这可能   用以下三种方式之一指定：

     

  

• 用于返回的渲染器函数   给定的单元格的HTML标记   单元格的数据值。

  

• 一个字符串   引用的属性名称   Ext.util.Format类提供了一个   渲染器功能。

  

• 一个对象   指定渲染器功能，   及其执行范围（这   参考）例如：

       

  {           fn：this.gridRenderer，            范围：这个      }

  

您正在使用渲染器功能选项，这意味着您的函数需要返回一个html标记字符串，而不是一个新的Button对象。要显示按钮，您可能需要使用列的editor属性