如何获得对extJS生成的元素的JQuery / Javascript访问？

我正在使用extJS构建一个简单的站点。

我可以成功地从JQuery和extJS中附加点击事件，但仅限于我在body标签本身的HTML中创建的元素。

但是，我附加到extJS生成的元素的事件要么没有效果，要么导致不生成extJS站点。

例如， 本教程中的所有示例都不起作用（并且它们准确地显示了我想要做的事情：从extJS内部操作DOM），但是如果我尝试从extJS内部访问DOM元素，那么我只需获取该元素“为空”的错误，如下面的错误屏幕截图所示。 我不了解extJS，为什么我尝试使用get（）null来访问所有元素？

如何更改以下代码，以便我可以将事件附加到extJS生成的元素，例如“myPanel”div？

以下是我在Firebug中遇到的错误：

虽然myPanel div确实存在：

@Mchl，getCmp似乎不起作用：

        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; }   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:'
This is where the content goes for each selection.
', // 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] }); });    
this is a test
   

@arun，“this”似乎包含了正确的元素，但它并没有改变背景颜色（虽然它只在一个jquery-only示例中没有我测试过的extJS），而且我无法以任何方式操纵它与任何其他css属性：

Answer 1

尝试使用jQuery提供的委托方法。

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

在这里查找更多细节learningjquery jquery api

我没有测试过这段代码，只是你可以研究另一个方向

Answer 2

快速提示：尝试使用Ext.getCmp（）而不是Ext.get（）

更好的提示：请参阅： http ： //vimeo.com/14816550

Answer 3

请查看我对您的其他（重复？） 问题的回答 。

看看这个问题中的代码（你没有在另一个问题中完全发布），Ext.get（）和Ext.getCmp（）不适合你的原因是Panel在你还没有渲染的时候’调用它们（这就是调用返回null的原因）。 由于您将面板定义作为项添加到视口中，因此在视口实例化和呈现之前不会呈现它们（这是Ext的特定优势，它支持延迟呈现以实现性能）。 所以要解决这个问题，你应该简单地移动任何必须在视口代码之后访问Panel的DOM的代码，或者将它放在Panel的render事件的事件处理程序中（正如我在链接的答案中所示）。

您接受的答案恰好是因为单击处理程序的附加在幕后被延迟了，但它并不是真正正确的方法（并且不需要为此目的注入jQuery，除非您正在使用它为了别的什么）。