How can I get JQuery/Javascript access to elements generated by extJS?_问答_开发者

I am building a simple site with extJS.

I can successfully attach click events from JQuery and from within extJS but only to elements which I create in the HTML in the body tag itself.

However, events that I attach to extJS-generated elements either have no effect or cause the extJS site not to be generated.

For example, all the examples on in this tutorial simply don't work (and they show exactly what I want to do: manipulate DOM from inside extJS), but if I try to access a DOM element from inside extJS as it states, I simply get the error that that element "is null" as in the error screenshot below. What am I not understanding about extJS, why are all the elments I try to access with get() null?

How can I change the following code so that I can attach events to extJS-generated elements, e.g. to the "myPanel" div?

Here are the errors I get in Firebug:

How can I get JQuery/Javascript access to elements generated by extJS?

although myPanel div does exist:

How can I get JQuery/Javascript access to elements generated by extJS?

@Mchl, getCmp doesn't seem to work:

How can I get JQuery/Javascript access to elements generated by extJS?

<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;
        }
开发者_如何学Go
        .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" seems to contain the right element, but it does not change the background color (although it does in a jquery-only example without extJS which I tested), and I cannot manipulate it in any way with any other css attributes:

How can I get JQuery/Javascript access to elements generated by extJS?

Try using the delegate method provided by jQuery.

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

Find more details here learningjquery jquery api

I've not tested this code, but just another direction you can look into

Quick tip: Try using Ext.getCmp() instead of Ext.get()

Better tip: See this: http://vimeo.com/14816550

Please see my answer to your other (duplicate?) question.

Looking at the code in this question (which you didn't fully post in the other question) the reason Ext.get() and Ext.getCmp() are not working for you is that the Panel is not yet rendered at the time you're calling them (that's why the calls return null). Since you are adding the Panel definitions into the viewport as items, they don't get rendered until the viewport is instantiated and rendered (this is a specific benefit of Ext, that it supports lazy-rendering for performance purposes). So to fix that, you should simply move any code that has to access the Panel's DOM either after the viewport code, or place it in an event handler for the Panel's render event (as I showed in the linked answer).

The answer you accepted happens to work simply because the attaching of the click handler is delayed for you behind the scenes, but it's not really the correct approach (and there is no need to inject jQuery just for this purpose, unless you're using it for something else).