cannot pass object dynamically in function in extjs/javascript

I want to perform click action on a displayfield in extjs. It doesn't have click listeners so i added <a></a> tags in its html as follows:

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

html: '<a href="javascript: Ext.ux.classobj.me开发者_如何学JAVAthod('+obj+')" ><img src="image.png" /></a>'

The problem is I can't pass object dynamically. Means the above <a></a> doesn't call the method and fires an error as it calls :

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

However, if i use static values like

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

This method will be called without any error as it calls:

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

Does anyone knows how to do this? Thanks a lot for help

Regards

---

The default toString of an object just returns "[object Object]" which (as you found out) isn't what you want.

I'd step back and ask, if you're using a framework like ExtJS which provides quite rich functionality, why are you falling back on the onclick attribute on an anchor? ExtJS (like most other JavaScript libraries) provides a means of hooking an event on an object in a more modern way, a way in which you could use obj directly.

I haven't used ExtJS in years, so I'm afraid I don't recall the direct way to do this, but I think it's either EventManager.addListener or more likely some shorthand for it like Element#on. So you'd add your anchor (or span, or whatever), and then use addListener to add a click event handler which uses obj directly. Something like:

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

...or, of course, simply:

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

...but again, my ExtJS-fu is very weak these days.

---

If obj is global, you have to write:

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

If you make string concatenation, then you are getting the string value of the object which by default is [object Object].

---

Change your html assignment to:

Using Ext.util.JSON.encode:

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

Using JSON.stringify:

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

---

I would do something like:

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

Basically, wait for the DisplayField to render and then add the click listener to the el backing the component. As long as obj is available via closure, you're fine.

You could also use createDelegate to bind obj as the lone argument for the event handler:

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