首页 > 编程语言> > 如何获得对extJS生成的元素的JQuery / Javascript访问？

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

2019-12-09 01:36:53 作者：互联网

我正在用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