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

2019-12-09 01:36:53 阅读：301 来源： 互联网

标签：extjs event-handling events javascript jquery

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

我可以成功地将JQuery和extJS中的单击事件附加到body标签本身在HTML中创建的元素上.

但是,我附加到extJS生成的元素的事件要么无效,要么导致不生成extJS站点.

例如,所有关于in this tutorial的示例都根本不起作用(它们确实显示了我想做的事情：从extJS内部操作DOM),但是,如果我尝试从extJS内部访问DOM元素,那么我得到的只是该元素“为空”的错误,如下面的错误屏幕截图所示.我对extJS不了解什么,为什么我尝试使用get()访问的所有要素都为null？

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

这是我在Firebug中遇到的错误：

尽管myPanel div确实存在：

@ Mchl,getCmp似乎不起作用：

<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示例中确实如此),并且我无法以任何其他CSS方式对其进行操作属性：

解决方法:

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

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

在这里找到更多详细信息
learningjquery
jquery api

我尚未测试此代码,但您可以研究另一个方向

标签：extjs,event-handling,events,javascript,jquery
来源： https://codeday.me/bug/20191209/2095530.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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