Comment puis-je obtenir l'accès JQuery / Javascript aux éléments générés par extJS?

Je construis un site simple avec extJS.

Je peux joindre avec succès les événements de clic de JQuery et de l'extJS, mais uniquement aux éléments que je crée dans le HTML dans la balise du corps lui-même.

Toutefois, les événements que j'attache aux éléments générés par extJS n'ont aucun effet ou ne provoquent pas de générer le site extJS.

Par exemple, tous les exemples de ce didacticiel ne fonctionnent plus simplement (et ils montrent exactement ce que je veux faire: manipuler DOM à partir d'extJS), mais si j'essaie d'accéder à un élément DOM à l'intérieur d'extJS tel qu'il l'indique, je Obtenez simplement l'erreur que cet élément "est nul" comme dans la capture d'écran d'erreur ci-dessous. Qu'est-ce que je ne comprends pas sur extJS, pourquoi sont tous les éléments auxquels j'essaie d'accéder avec get () null?

Comment puis-je modifier le code suivant afin que je puisse attacher des événements aux éléments générés par extJS, par exemple à la division "myPanel"?

Voici les erreurs que j'ai dans Firebug: Texte alt

Bien que myPanel div existe: Texte alt

@Mchl, getCmp ne semble pas fonctionner: Texte alt

<html> <head> <title>New Backend Layout</title> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/> <script type="text/javascript" src="adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-all.js"></script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <style type="text/css"> html, body { font: normal 12px verdana; margin: 0; padding: 0; border: 0 none; overflow: hidden; height: 100%; } .empty .x-panel-header { background-color: #FFFF99; } .empty .x-panel-body { text-align:left; color: #333; background-color: #FFFFCC; padding: 10px; font-size:11px; } .withtabs .x-panel-header { background-color: #FFFF99; } .withtabs .x-panel-body { text-align:left; color: #333; background-color: #FFFFCC; font-size:11px; } .subpanel .x-panel-body { padding: 5px; } .withtabs .x-tab-panel-header { background-color: #CCFF99; } .withtabs .x-tab-strip { background-color: #CCFF99; } </style> <script type="text/javascript"> google.load("jquery", "1.4.3"); google.setOnLoadCallback(function() { $('#testInHtml').css("background-color","yellow"); //changes color of element $('#ext-gen9').css('background-color', 'red'); //does not change color of element }); Ext.onReady(function() { var item1 = new Ext.Panel({ title: 'Start', html: 'Welcome', cls:'empty' }); var item2 = new Ext.Panel({ title: 'Application', html: 'the application', cls:'empty' }); var accordion = new Ext.Panel({ region:'east', margins:'5 5 5 0', split:true, width: 210, bodyStyle: 'background: #FFFFCC', layout:'accordion', layoutConfig:{ animate:true }, items: [item1, item2] }); var content = new Ext.Panel({ id: 'myPanel', region:'center', margins:'5 0 5 5', cls:'empty', bodyStyle:'background:ivory; font-size: 13pt', html:'<p id="test123">This is where the content goes for each selection.</p>', // listeners: { // click: function() { // alert('was clicked333'); //has no effect // } // } }); //Ext.get('myPanel').on('click', function() { alert('was clicked2');}); //causes extJS-generated site not to appear Ext.get('testInHtml').on('click', function() {alert('was clicked');}); //works //Ext.get('ext-gen9').on('click', function() {alert('was clicked');}); //causes extJS-generated site not to appear var viewport = new Ext.Viewport({ layout:'border', items:[content, accordion] }); }); </script> </head> <body> <p id="testInHtml">this is a test</p> </body> </html>

@arun, "this" semble contenir le bon élément, mais il ne change pas la couleur d'arrière-plan (bien qu'il le fasse dans un exemple jquery-only sans extJS que j'ai testé) et je ne peux pas le manipuler de quelque manière que ce soit avec d'autres css les attributs:

Texte alt

Essayez d'utiliser la méthode déléguée fournie par jQuery .

 JQuery("body").delegate("#myPanel", "click", function(){ //Your handler });

Retrouvez plus de détails ici learningjquery jquery api

Je n'ai pas testé ce code, mais juste une autre direction dans laquelle vous pouvez regarder

Astuce rapide: Essayez d'utiliser Ext.getCmp () au lieu de Ext.get ()

Meilleur conseil: voir ceci: http://vimeo.com/14816550

Veuillez voir ma réponse à votre autre question (dupliquer?).

En regardant le code dans cette question (que vous n'avez pas bien posté dans l'autre question), la raison pour laquelle Ext.get () et Ext.getCmp () ne fonctionnent pas pour vous est que le Panel n'est pas encore rendu au moment où vous 'Les appelant (c'est pourquoi les appels retournent null ). Étant donné que vous ajoutez les définitions du Panel dans la fenêtre comme éléments, elles ne sont pas rendues jusqu'à ce que la fenêtre soit instanciée et rendue (c'est un avantage spécifique de Ext, qu'il supporte le rendu paresseux à des fins de performance). Donc, pour résoudre cela, vous devez simplement déplacer tout code qui doit accéder au DOM du Panel soit après le code de la fenêtre, soit placez-le dans un gestionnaire d'événements pour l'événement de render du Panel (comme je l'ai montré dans la réponse liée).

La réponse que vous avez acceptée fonctionne simplement parce que l'attachement du gestionnaire de clics est retardé pour vous dans les coulisses, mais ce n'est pas vraiment l'approche correcte (et il n'est pas nécessaire d'injecter jQuery uniquement à cette fin, sauf si vous l'utilisez Pour autre chose).