не может передать объект динамически в функции в extjs / javascript

Question

Я хочу выполнить действие клика по полю отображения в extjs.У него нет прослушивателей кликов, поэтому я добавил <a></a> теги в html следующим образом:

obj = {a: 123, b: 'abc' }

html: '<a href="javascript: Ext.ux.classobj.method('+obj+')" ><img src="image.png" /></a>'

Проблема в том, что я не могу передать объект динамически.Означает, что выше <a></a> не вызывает метод и выдает ошибку при вызове:

javascript: Ext.ux.classobj.method(object Object)

Однако, если я использую статические значения, такие как

  html: '<a href="javascript: Ext.ux.classobj.method({a:123, b:'abc'})" ><img src="image.png" /></a>'

Этот метод будет вызван безо всякой ошибки, так как он вызывает:

javascript: Ext.ux.classobj.method({a:123, b:'abc'})

Кто-нибудь знает, как это сделать?Большое спасибо за помощь

С уважением

Answer 1

По умолчанию toString объекта просто возвращает "[объект объекта]", который (как вы выяснили) не то, что вы хотите.

Я бы отступил назад и спросил, если вы используете фреймворк, такой как ExtJS, который предоставляет довольно богатые функциональные возможности, почему вы обращаетесь к атрибуту onclick на привязке? ExtJS (как и большинство других библиотек JavaScript) предоставляет средство для перехвата события на объекте более современным способом, так что вы можете использовать obj напрямую.

Я не использовал ExtJS годами, поэтому боюсь, что не помню прямого способа сделать это, но я думаю, что это либо EventManager.addListener, либо, скорее, некоторые сокращения для него как Element#on. Таким образом, вы добавили бы свой якорь (или span, или любой другой), а затем использовали addListener, чтобы добавить обработчик событий click, который напрямую использует obj. Что-то вроде:

var obj = {a: 123, b: 'abc' };
Ext.get('theId').on('click', function() {
    Ext.ux.classobj.method(obj);
});

... или, конечно, просто:

Ext.get('theId').on('click', function() {
    Ext.ux.classobj.method({a: 123, b: 'abc' });
});

... но опять же, мой ExtJS-фу очень слаб в наши дни.

Answer 2

Я бы сделал что-то вроде:

var obj = { /* ...  */ };

//  ...
{
  xtype: 'displayfield',
  html: '<img src="image.png" />', // notice no <a> needed
  listeners: {
    render: function() {
      this.el.on('click', function() {
        Ext.ux.classobj.method(obj);
      });
    }
  }
}

По сути, подождите, пока DisplayField отобразит, а затем добавьте прослушиватель щелчков к элементу, поддерживающему компонент.Пока obj доступен через замыкание , все в порядке.

Вы также можете использовать createDelegate для привязки obj в качестве единственного аргумента для обработчика события:

this.el.on('click', 
   Ext.ux.classobj.method.createDelegate(Ext.ux.classobj, [obj]));

Answer 3

Если obj глобально, вы должны написать:

<a href="javascript: Ext.ux.classobj.method(obj)" ><img src="image.png" /></a>

Если вы выполните конкатенацию строк, вы получите строковое значение объекта, которое по умолчанию равно [object Object].

Answer 4

Измените свое HTML-назначение на:

Использование Ext.util.JSON.encode:

html: '<a href="javascript: Ext.ux.classobj.method(' + Ext.util.JSON.encode
(obj) + ')" ><img src="image.png" /></a>'

Использование JSON.stringify:

html: '<a href="javascript: Ext.ux.classobj.method(' + JSON.stringify(obj) + ')" ><img src="image.png" /></a>'