title: Migrating ExtJS3 to ExtJS4
body: <p>I am newbie to ExtJS. As client requirement ExtJS3 code is there we need to convert it into ExtJS4.I am trying a lot but it is not displaying result.</p>
  
  <p>Html code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Search Window With Ext JS 4&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="ext-4.0.1/resources/css/ext-all.css"/&gt;
  &lt;script type="text/javascript" src="ext-4.0.1/ext-all.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="ext-4.0.1/bootstrap.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" src="searchwindow.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="SearchRegionPan.js"&gt;&lt;/script&gt;
  
  &lt;body&gt;
  &lt;div id="panel" style="padding:10px"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>ExtJS code:
  searchwindow.js:</p>
  
  <pre><code>Ext.require(['*']);
  
   Ext.onReady(function(){
  
       Ext.QuickTips.init();
  
  var SearchRegionPan = new SearchRegionPan();
  
  //************************* SEARCH TAB **************************************
  var searchTab = {
                      id          :   'searchTab',
                      border      :   false,
                      //autoHeight    :   true,
                      //title     :   searchTitle,
                      items       :   [SearchRegionPan,
                        {
                          xtype:'label',
                                      text:'',
                                      style:'padding:2px 1px 0 40px;font-weight: bold;color: red;text-align: center;',
                                      itemId  :   'totallabel'
                                      }],
                      title       :   'Search'
                  };
  
  //*************************** SCHOOL INFO TAB **********************************
  var schoolInfo = {
                      id          :   'schoolInfo',
                      autoScroll  :   true,
                      border      :   false,
                      //autoHeight    :   true,
                      title       :   'School Info'
                  };
  
  //************************ QUICK SEARCH TAB ***************************************
  var quickSearchMainTab = {
                      layout      :   'column',
                      //columnWidth:  0.5,
                      xtype       :   'panel',
                      border      :   false,
                      //autoHeight    :   true,
                      id          :   'quickpanelID',         
                      title       :   'Quick Search',     
                      bodyStyle   :   'background:#f7fbfc;'
                  };
  
  
  //***************************** LAYERS ****************************************
  var layerss = {
                      id          :   "tree",
                      //title     :   layersTitle,
                      title       :   'Layers',
                      xtype       :   "treepanel",
                      height      :   290,    
                      //showWmsLegend:    true,
                      //model     :   model
                      enableDD    :   true
                }; 
  
  //****************************** TABS IN SEARCH MAIN TAB ********************************
  var tabs = {
                      margins         :   '3 3 3 0',
                      activeTab       :   0,
                      style           :   'background:none; padding-top:10px',
                      plain           :   true,
                      xtype           :   'tabpanel',
                      id      :'tabs',                    frame           :   false,
                      border          :   false,
                      //autoHeight        :   true,
                      deferredRender  :   false,
                      items           :   [searchTab, schoolInfo, quickSearchMainTab, layerss]
              };
  
  // ***************************** SEARCH MAIN TAB ******************************************
  var searchMainTab = {
                      id              :   'searchMainTab',
                      layout          :   'fit',
                      border          :   false,
                      //title         :   searchInfoTitle,
                      title           :   'Search Info',
                      items           :   [tabs]
                      //autoHeight    :   true
                      //iconCls           :   's_ico'             
                  }; 
  
   //********************************** searchTabs USED IN SEARCH WINDOW *******************************   
  searchTabs = Ext.create('Ext.tab.Panel',{
                      margin          :   '3 3 3 0',
                      activeTab       :   0,
                      style           :   'background:none',
                      plain           :   true,
                      id              :   'searchTabs',
                      //autoHeight        :   true,
                      width           :   350,
                      //baseCls           :   'srcTab',
                      style           :   'padding-top:10px',
                      frame           :   false,
                      items           :   [searchMainTab],
                      border          :   false   
                    });
  
  // *********************************** SEARCH WINDOW *************************************
  searchWin = Ext.create('Ext.window.Window',{
                      title           :   '&lt;p style="font:1px tahoma,arial,helvetica,sans-serif;color:white"&gt;&lt;/p&gt;',
                      //width         :   360,
                      width           :   400,
                      height          :   380,
                      autoHeight      :   true,
                      x               :   100,   //to display search window 100px from left
                      y               :   100,   //to display search window 100px from top
                      draggable       :   true,
                      autoScroll      :   false,
                      plain           :   true,
                      id              :   'searchMainWindow',
                      layout          :   'fit',
                      border          :   true,
                      //baseCls           :   'searchWin',
                      //animateTarget :   'searInfo',
                      resizable       :   false,
                      shadow          :   false,
                      frame           :   false,
                      closeAction     :   'hide',
                      items           :   [searchTabs],
                      renderTo        :   panel   //used to render to html page
                      });
                      searchWin.show();
      });    
  
  
  SearchRegionPan.js:
  
  Ext.require('*');
  
  //*************** SEARCH REGION PAN USED IN SEARCH TAB ***************************
  SearchRegionPan = Ext.create('Ext.Panel',{
                      id          :   'searchRegionPan',
                      border      :   false,          
                      style       :   'padding:5px 10px 0 10px ',
                      items       :   [RegionCityDistForm],
                      frame       :   false
                  });
  
  //************** REGIONCITYDISTFORM USED IN SEARCH TAB **********************************
  var RegionCityDistForm = Ext.create('Ext.form.Panel',{
                      extend          :   'Ext.panel.Panel',
                      id              :   'regioncitydistform',
                      frame           :   true,
                      border          :   true,
                      height          :   100,
                      padding         :   '10px 20px 10px 10px',
                      width           :   '100%',
                      layout          :   'anchor',
                      fieldDefaults   :   {
                          labelWidth  :   140
                      },
                      items           :   [Region,City,District]
              });
  
  //*************************** REGION DECLARATION *********************************
  var Region  =   Ext.create('Ext.form.TextField',{
                      fieldLabel      :   'Region',
                      selectOnFocus   :   true,
                      width           :   330,
                      allowBlank      :   false,
                      editable        :   true,
                      emptyText       :   'Select a Region...',
                      triggerAction   :   'all',
                      typeAhead       :   true
              });
  
  //**************************** CITY DECLARATION *********************************
  var City    =   Ext.create('Ext.form.TextField',{
                      fieldLabel      :   'City',
                      selectOnFocus   :   true,
                      width           :   330,
                      allowBlank      :   false,
                      editable        :   true,
                      emptyText       :   'Select a City...',
                      triggerAction   :   'all',
                      typeAhead       :   true
              });
  
  //************************* DISTRICT DECLARATION ************************************
  var District    =   Ext.create('Ext.form.TextField',{
                      fieldLabel      :   'District',
                      selectOnFocus   :   true,
                      width           :   330,
                      allowBlank      :   false,
                      editable        :   true,
                      emptyText       :   'Select a District...',
                      triggerAction   :   'all',
                      typeAhead       :   true
              }); 
  </code></pre>
  
  <p>As per my Knowledge i am expecting that new keyowrd is not working in ExtJS4 version.If anyone knows please let me know.</p>
  
  <p>Thanks in Advance,
  Ramu   </p>