title: How can I get JQuery/Javascript access to elements generated by extJS?
body: <p>I am building a simple site with extJS.</p>
  
  <p>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.</p>
  
  <p>However, events that I attach to extJS-generated elements either have no effect or cause the extJS site not to be generated.</p>
  
  <p>For example, all the examples on <a href="http://khaidoan.wikidot.com/extjs" rel="nofollow noreferrer">in this tutorial</a> 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. <strong>What am I not understanding about extJS, why are all the elments I try to access with get() null?</strong></p>
  
  <p><strong>How can I change the following code so that I can attach events to extJS-generated elements, e.g. to the "myPanel" div?</strong></p>
  
  <p>Here are the errors I get in Firebug:
  <img src="https://i.stack.imgur.com/skcvH.png" alt="alt text"></p>
  
  <p>although myPanel div does exist:
  <img src="https://i.stack.imgur.com/MyAJC.png" alt="alt text"></p>
  
  <p>@Mchl, getCmp doesn't seem to work:
  <img src="https://i.stack.imgur.com/d5lsD.png" alt="alt text"></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;New Backend Layout&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/&gt;
      &lt;script type="text/javascript" src="adapter/ext/ext-base.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="ext-all.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
  
  
      &lt;style type="text/css"&gt;
          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;
          }
  
  
      &lt;/style&gt;
      &lt;script type="text/javascript"&gt;
  
              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:'&lt;p id="test123"&gt;This is where the content goes for each selection.&lt;/p&gt;',
  //              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]
              });
  
  
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;p id="testInHtml"&gt;this is a test&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>@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:</p>
  
  <p><img src="https://i.stack.imgur.com/aAFJY.png" alt="alt text"></p>