title: Objects in ExtJS. Ext.create or new operator?
body: <p>I am new to ExtJS. I started to program a little form. And I got completely confused about the use of Ext.create and the new operator.</p>
  
  <p>So here is the code:</p>
  
  <p>I wanted to program a form. I found a small example on one of the sencha pages. It creates a form like this:</p>
  
  <pre><code>var descAndSystem = new Ext.form.Panel ({
      region: 'center',
      layout: 'vbox',
      margins: '5 5 5 5',
      xtype: 'form',
      title: 'Some title',
      id: 'descAndSystem',
      width: '800', 
      items: [
         { xtype: 'textarea',
       fieldLabel: 'Provide a description',
       name: 'rightdescription',
         },
         {
        xtype: 'combobox',
        fieldLabel: 'Choose System',
        store: systems,
        queryMode: 'local',
        displayField: 'name',
        valueField: 'name',
        name: 'system'
         }
      ]
  });
  </code></pre>
  
  <p>then I used descAndSystem as component in a viewport:</p>
  
  <pre><code>Ext.create('Ext.container.Viewport', {
      layout: 'border',
      id: 'wizardcontainer',
      items: [
          descAndSystem,
          {
              region: 'south', 
              layout: 'hbox',
              margins: '5 5 5 5',
              items: [
                 { xtype: 'button', text: '&amp;lt;&amp;lt; Back', handler: onNext },
                 { xtype: 'button', text: 'Next &amp;gt;&amp;gt;', handler: onNext },
                 { xtype: 'button', text: 'Cancel', align: 'right', handler: function () { alert ('Abgebrochen geklickt.'); } }
              ]
          }
     ]
  });
  </code></pre>
  
  <p>After a lot of trial and error I found that I can access the values of my form by the following code:</p>
  
  <pre><code>Ext.getCmp ('descAndSystem').getForm ().findField ('rightdescription').getValue ()
  </code></pre>
  
  <p>in contrast to what one of the books I bought said the following code did NOT work:</p>
  
  <pre><code>Ext.getCmp ('rightdescription').getValue ()
  </code></pre>
  
  <p>But my real problem is that I would expect that</p>
  
  <pre><code>Ext.create ('Ext.form.Panel', { .... });
  </code></pre>
  
  <p>is the same as</p>
  
  <pre><code>new Ext.form.Panel ( {...});
  </code></pre>
  
  <p>But when I do the latter the Chrome interpreter says:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'Panel' of undefined'
  </code></pre>
  
  <p>Again, after a lot of trial and error, the following worked:</p>
  
  <pre><code>new Ext.Panel ( {...});
  </code></pre>
  
  <p>Not only that I couldn't find any reference to an object of that name in the documentation, also the line</p>
  
  <pre><code>Ext.getCmp ('descAndSystem').getForm ().findField ('rightdescription').getValue ()
  </code></pre>
  
  <p>now yields an error:</p>
  
  <pre><code>Uncaught TypeError: Object [object Object] has no method 'getForm'
  </code></pre>
  
  <p>In addition, I was trying to replace descAndSystem by another form by DOM manipulation, there are various replace methods in the documentation. None of them worked, I always got the error message "has no method 'replace'".
  I have the strong suspicion that I got something wrong fundamentally. Any hints? I am using ExtJS 4 and Chromium 17.0.963.56 on Ubuntu 10.10 64-bit.</p>