Question

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

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

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

例如，in this tutorial上的所有示例都不起作用（它们显示我想要做的事情：从extJS内部操作DOM），但是如果我尝试从extJS内部访问DOM元素正如它所述，我只是得到该元素“为空”的错误，如下面的错误屏幕截图所示。 我对extJS的理解不清楚，为什么我尝试使用get（）null来访问所有元素？

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

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

虽然myPanel div确实存在： alt text

@Mchl，getCmp似乎不起作用： alt text

<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，“这个”似乎包含了正确的元素，但它并没有改变背景颜色（尽管它只是在我测试的没有extJS的jquery-only示例中），并且我无法以任何方式操纵它任何其他css属性：

alt text

Answer 1

尝试使用delegate提供的jQuery方法。

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

在此处查找更多详情 learningjquery jquery api

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

Answer 2

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

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

Answer 3

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

查看这个问题中的代码（你没有在另一个问题中完全发布），Ext.get（）和Ext.getCmp（）不适用于你的原因是Panel尚未呈现你打电话给他们的时间（这就是呼叫返回null的原因）。由于您将Panel定义作为项添加到视口中，因此在视口实例化和呈现之前不会呈现它们（这是Ext的特定优点，它支持延迟呈现以实现性能）。因此，要解决这个问题，您只需移动任何必须在视口代码之后访问Panel的DOM的代码，或者将其放在Panel的render事件的事件处理程序中（如我在链接的答案中所示）。

您接受的答案恰好是因为在幕后为您延迟点击处理程序的附加工作，但它并不是真正正确的方法（并且不需要为此目的注入jQuery，除非您'重新使用它来做其他事情。）

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

3 个答案: