EXTJS: Whats the difference between Ext.widget and Ext.create?

Question

I am new to EXTJS, sometimes very confused about those method calls. Can someone give some explaination?

Thank You!

Answer 1

Ext.widget performs a very similar function to Ext.create. The main difference is that Ext.widget can only create components with an xtype. For example, these are equivalent calls:

const c1 = Ext.widget('panel'); // Uses xtype
const c2 = Ext.create('Ext.panel.Panel'); // Uses classname

Answer 2

Ext.Widget (docs)

Ext.Widget is a light-weight Component that consists of nothing more than a template Element that can be cloned to quickly and efficiently replicate many instances. Ext.Widget is typically not instantiated directly, because the default template is just a single element with no listeners. Instead Ext.Widget should be extended to create Widgets that have a useful markup structure and event listeners.

Another is when creating a class you can add

alias: 'widget.somename'

Doing so now allows you to create objects

Ext.create('widget.somename')

Or using it directly as

xtype: 'somename'

Whereby Ext.create (docs)

Instantiate a class by either full name, alias or alternate name. If Ext.Loader is enabled and the class has not been defined yet, it will attempt to load the class via synchronous loading.

And a code example whereby all of it below produces the same results

 // xtype
 var window = Ext.create({
     xtype: 'window',
     width: 600,
     height: 800,
     ...
 });

 // alias
 var window = Ext.create('widget.window', {
     width: 600,
     height: 800,
     ...
 });

 // alternate name
 var window = Ext.create('Ext.Window', {
     width: 600,
     height: 800,
     ...
 });

 // full class name
 var window = Ext.create('Ext.window.Window', {
     width: 600,
     height: 800,
     ...
 });

 // single object with xclass property:
 var window = Ext.create({
     xclass: 'Ext.window.Window', // any valid value for 'name' (above)
     width: 600,
     height: 800,
     ...
 });