Objects in ExtJS. Ext.create or new operator?

Question

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.

So here is the code:

I wanted to program a form. I found a small example on one of the sencha pages. It creates a form like this:

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'
       }
    ]
});

then I used descAndSystem as component in a viewport:

Ext.create('Ext.container.Viewport', {
    layout: 'border',
    id: 'wizardcontainer',
    items: [
        descAndSystem,
        {
            region: 'south', 
            layout: 'hbox',
            margins: '5 5 5 5',
            items: [
               { xtype: 'button', text: '&lt;&lt; Back', handler: onNext },
               { xtype: 'button', text: 'Next &gt;&gt;', handler: onNext },
               { xtype: 'button', text: 'Cancel', align: 'right', handler: function () { alert ('Abgebrochen geklickt.'); } }
            ]
        }
   ]
});

After a lot of trial and error I found that I can access the values of my form by the following code:

Ext.getCmp ('descAndSystem').getForm ().findField ('rightdescription').getValue ()

in contrast to what one of the books I bought said the following code did NOT work:

Ext.getCmp ('rightdescription').getValue ()

But my real problem is that I would expect that

Ext.create ('Ext.form.Panel', { .... });

is the same as

new Ext.form.Panel ( {...});

But when I do the latter the Chrome interpreter says:

Uncaught TypeError: Cannot read property 'Panel' of undefined'

Again, after a lot of trial and error, the following worked:

new Ext.Panel ( {...});

Not only that I couldn't find any reference to an object of that name in the documentation, also the line

Ext.getCmp ('descAndSystem').getForm ().findField ('rightdescription').getValue ()

now yields an error:

Uncaught TypeError: Object [object Object] has no method 'getForm'

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.

You must be doing something wrong. Ext.create('className', {}) would produce the same result as new className({}). — pllee

Rob Agar Rob Agar · Accepted Answer · 2013-01-25T13:31:03

The major difference is that Ext.create('Ext.form.Panel') will automatically download the appropriate javascript file if the Ext.form.Panel class does not exist. The vanilla new operator can not do this - it has no idea what a Ext.form.Panel might be or where the definition might be found.

The Cannot read property 'Panel' of undefined' error indicates that not only is Ext.form.Panel not defined, neither is the parent Ext.form namespace object.

Objects in ExtJS. Ext.create or new operator?

4 Answers