javascript - 为什么我的 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

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