title: ExtJS - embeding jsp page with extjs grid inside tab
body: <p>Earlier my application was using frames where a jsp page used extjs grid to display data. Now I am trying to remove the frames and use the extjs tab for display. I am able to include the jsp page inside a tab using 
  <strong>autoLoad:{url:"test.jsp"}</strong> inside tab. But my problem is the extjs grid is not getting displayed. While searching I just found out by defining 
  <strong>autoLoad:{url:"test.jsp", scripts:true}</strong> it activate the scripts inside the jsp page. But on running my application it displays <strong>ext is undefined</strong> . I dont know how it is coming since I have included the ext-all script inside my jsp file. Please help me to know whether the approach is correct or what shall I do to get grid displayed while working with extjs tab.</p>
  
  <p><strong>MainPage</strong></p>
  
  <pre><code>Ext.onReady(function(){
   Ext.create('Ext.tab.Panel', {
   height:300,
     items: [
          {
              title: 'eRAM summary',
              autoLoad: {url: 'test1.jsp',scripts:true},
              closable:true
          }
      ],
      renderTo : document.body
  });
  </code></pre>
  
  <p><strong>test.jsp</strong> contains grid as</p>
  
  <pre><code>&lt;script&gt;
  function getRandomDate() {
      var from = new Date(1900, 0, 1).getTime();
      var to = new Date().getTime();
      return new Date(from + Math.random() * (to - from));
  }
  function createFakeData(count) {
          var firstNames   = ['Ed', 'Tommy', 'Aaron', 'Abe'];
          var lastNames    = ['Spencer', 'Maintz', 'Conran', 'Elias'];
  
          var data = [];
          for (var i = 0; i &lt; count ; i++) {
              var dob = getRandomDate();           
              var firstNameId = Math.floor(Math.random() * firstNames.length);
              var lastNameId  = Math.floor(Math.random() * lastNames.length);
              var name        = Ext.String.format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);
  
              data.push([name, dob]);
          }
          return data;
      }
  Ext.onReady(function(){   
       Ext.define('Person',{
          extend: 'Ext.data.Model',
          fields: [
              'Name', 'dob'
          ]
      });
  
  // create the Data Store
  var store = Ext.create('Ext.data.Store', {
      model: 'Person',
      autoLoad: true,
      proxy: {
          type: 'memory',
              data: createFakeData(10),
              reader: {
                  type: 'array'
              }
      }
  });
  // create the grid
  Ext.create('Ext.grid.Panel', {
      store: store,
      columns: [
          {text: "Name", width:120, dataIndex: 'Name'},
          {text: "dob", width: 380, dataIndex: 'dob'}
      ],
      renderTo:'example-grid',
      width: 500,
      height: 280
      });    
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>This is the example with which I am trying to embed in my application </p>