kann Objekt nicht dynamisch in Funktion übergeben in extjs/javascript

Question

Ich möchte Klickaktion auf einem Anzeigefeld in Extjs durchführen. Dabei spielt es keine Klick Zuhörer haben, so dass ich <a></a> Tags in seiner html wie folgt hinzugefügt:

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

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

Das Problem ist, ich nicht Objekt dynamisch passieren kann. Bedeutet, dass die oben <a></a> nicht die Methode nicht aufruft und feuert einen Fehler, da es nennt:

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

Wenn jedoch i statische Werte verwenden wie

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

Diese Methode ohne aufgerufen wird Fehler, wie sie ruft:

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

Does weiß jemand, wie man das macht? Vielen Dank für die Hilfe

Grüße

Answer 1

Ihre HTML-Zuordnung ändern zu:

Mit Ext.util.JSON.encode:

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

Mit JSON.stringify:

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

Answer 2

Wenn obj global ist, müssen Sie schreiben:

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

Wenn Sie String-Verkettung zu machen, dann werden Sie den String-Wert des Objekts erhalten standardmäßig die [object Object] ist.

Answer 3

Der Standardwert toString eines Objekts gibt nur "[Objekt Objekt]" zurück, was (wie Sie herausgefunden haben) nicht das ist, was Sie wollen.

Ich würde zurücktreten und fragen, wenn Sie ein Framework wie ExtJS verwenden, die ziemlich reichhaltige Funktionalität bietet, warum fallen Sie zurück auf das onclick Attribut auf einem Anker? ExtJS (wie die meisten anderen JavaScript-Bibliotheken) bietet eine Möglichkeit, ein Ereignis auf einem Objekt auf eine modernere Weise zu verknüpfen, so dass Sie obj direkt verwenden können.

Ich habe ExtJS seit Jahren nicht mehr benutzt, daher habe ich Angst, dass ich mich nicht an den direkten Weg erinnern kann, aber ich denke, es ist entweder EventManager.addListener oder eher eine Abkürzung dafür wie Element#on. Sie würden also Ihren Anker (oder Bereich oder was auch immer) hinzufügen und dann addListener verwenden, um einen click Event-Handler hinzuzufügen, der obj direkt verwendet. Etwas wie:

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

... oder natürlich einfach:

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

... aber auch hier mein ExtJS-fu ist in diesen Tagen sehr schwach.

Answer 4

ich tun würde, so etwas wie:

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

Grundsätzlich warten, bis die DisplayField zu machen und dann das Klicken Zuhörer auf die el fügen Sie die Komponente sichern. Solange obj über closure erreichbar ist, geht es dir gut.

Sie könnten auch createDelegate verwenden obj als einziges Argument zu binden, für die Event-Handler:

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