为什么我的ExtJS网格中的按钮显示为“[object Object]”？ [英] Why is the button in my ExtJS grid appearing as "[object Object]"?

问题描述

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

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

这基本上可以工作，除了按钮显示为文本 [object Object] ：

This basically works, except that the button is displayed as the text [object Object]:

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

添加 .getEl（） ：

adding .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中的代码altough我奇怪地没有得到任何错误：

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

推荐答案

这对我有用：

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

这篇关于为什么我的ExtJS网格中的按钮显示为“[object Object]”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！