Почему кнопка в моей сетке ExtJS выглядит как «[объект]]?

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

Это сработало для меня:

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 2

Попробуйте

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

Вы возвращаете объект JavaScript вашему рендереру, а не узлу dom.Если не работает, ваш рендерер ожидает строку HTML, поэтому вы можете попробовать

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

Любой из них должен решить вашу проблему.

Answer 3

Документация API говорит это

Renderer: Mixed Для альтернативы указание рендерера см. xtype Необязательный. Рендерер это метод перехватчика, который можно использовать преобразовать данные (значение, внешний вид, и т. д.) до того как оно будет оказано Это может указывается одним из трех способов:

• Функция визуализации, используемая для возврата HTML-разметка для ячейки с учетом значение данных ячейки.

• Строка, которая ссылается на имя свойства Ext.util.Format класс, который обеспечивает функция рендеринга.

• Объект указав обе функции рендерера, и его объем исполнения (это ссылка), например:

  { fn: this.gridRenderer, сфера: это }

Вы используете опцию функции рендерера, что означает, что ваша функция должна возвращать строку разметки html, а не новый объект Button. Чтобы показать кнопку, вам может понадобиться использовать свойство editor столбца

Answer 4

Когда вы видите синтаксис такого рода, скорее всего, вы смотрите на вывод метода 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());