代码之家 › 专栏 › 技术社区 › Edward Tanguay

如何获取jquery/javascript对extjs生成的元素的访问?

event-handling extjs events jquery javascript

Edward Tanguay · 技术社区 · 14 年前

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

我可以成功地将jquery和extjs中的click事件附加到body标记本身的HTML中创建的元素上。

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

例如,上的所有示例 in this tutorial 只是不起作用(它们确切地显示了我想要做的:从extjs内部操作dom),但是如果我试图从extjs内部访问dom元素,正如它所说的那样,我只会得到如下错误屏幕截图中的错误,即该元素“为空”。 我对extjs有什么不了解,为什么用get()空值访问所有的元素?

如何更改以下代码,以便将事件附加到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,“this”似乎包含正确的元素,但它不会更改背景颜色(尽管它在没有我测试的extjs的jquery-only示例中进行了更改),并且我无法使用任何其他css属性以任何方式操作它:

alt text

3 回复 | 直到 14 年前

Arun P Johny 14 年前

尝试使用 delegate 方法由提供 jQuery .

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

在此处查找更多详细信息 learningjquery jquery api

我没有测试过这段代码,但你可以从另一个方向来研究

Mchl 14 年前

快速提示:尝试使用ext.getcmp()而不是ext.get()。

更好的提示:请看: http://vimeo.com/14816550

Community CDub 8 年前

请看我对你另一个的回答(副本?) question .

查看这个问题中的代码(您在另一个问题中没有完全发布),ext.get()和ext.getcmp()对您不起作用的原因是在您调用它们时面板尚未呈现(这就是调用返回的原因)。 null )由于要将面板定义作为项添加到视区中,因此在视区实例化和渲染之前,它们不会被渲染(这是ext的一个特殊好处,因为它支持延迟渲染以提高性能)。所以要解决这个问题,您只需在视区代码之后移动任何必须访问面板的DOM的代码,或者将其放置在面板的事件处理程序中。 render 事件(如我在链接答案中所示)。

您接受的答案之所以能正常工作,仅仅是因为在幕后为您延迟了单击处理程序的附加,但这并不是真正正确的方法(并且不需要为此目的而注入jquery,除非您将其用于其他用途)。