为什么我的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');
            }
        });
    }
}

这基本上有效,除了按钮显示为文本[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中导致其他代码的某种渲染问题我奇怪地没有得到任何错误:

Answer 1

尝试

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

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

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

要么应该解决你的问题。