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

Question

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: alt text

although myPanel div does exist: alt text

@Mchl, getCmp doesn't seem to work: 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" 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:

alt text

Arun P Johny Arun P Johny · Accepted Answer · 2010-11-15T09:02:17

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

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

3 Answers