【问题标题】：Why is the button in my ExtJS grid appearing as "[object Object]"?为什么我的 ExtJS 网格中的按钮显示为“[object Object]”？
【发布时间】：2011-02-16 10:47:26
【问题描述】：

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

这基本上是可行的，只是按钮显示为文本[object Object]：

我必须怎样做才能使按钮显示为按钮而不是文本？

附录

添加.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 中的其余代码会导致某种渲染问题，但奇怪的是我没有收到任何错误：

【问题讨论】：

标签： javascript extjs grid

【解决方案1】：

试试

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

您将 JavaScript 对象返回给渲染器，而不是 dom 节点。如果不起作用，那么您的渲染器需要一个 HTML 字符串，因此您可以尝试

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

两者都可以解决您的问题。

【讨论】：

我尝试了这两种方法，但它们都不起作用。我在上面贴了截图。还有什么办法可以把它变成预期的dom节点？
ExtJS 期望从列渲染器返回一个简单的 HTML 字符串，因此返回 Ext 组件或返回 Ext.Element 或 HTML 节点都不起作用。
Gajahlemu 提供的链接指向正确的方向...在那里，他们使用某种延迟方法返回一个占位符<div>，按钮将在一些小的延迟后呈现到该占位符中。

【解决方案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

【讨论】：

我在渲染器函数上返回了一个“标签”对象，我收到了相同的消息 [object Object]，但 Patrik Khadloya 解决方案也适用于我。

【解决方案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());

【讨论】：

【解决方案4】：

API documentation 这么说

renderer : Mixed 用于替代指定渲染器参见 xtype 选修的。渲染器是一个可以使用的“拦截器”方法转换数据（值、外观、等）在渲染之前）。这可能可以通过以下三种方式之一指定：

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

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

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

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

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

【讨论】：