0

I want to know the difference between the following two code as they appear to work differently in my app. 

Ext.define('MyApp.view.MyView', {
extend: 'Ext.panel.Panel',
alias: 'widget.myViewContainer',

.....

});

Now, Case 1 

Ext.define('MyApp.view.UseMyView', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.useMyViewClass',


    items : [{
        title : 'New Title'
        xtype : 'myViewContainer'
    }]

});

Now, Case 2 

Ext.define('MyApp.view.UseMyView', {
        extend: 'Ext.panel.Panel',
        alias: 'widget.useMyViewClass',


        items : [{
            title: 'New Title'
            xtype: Ext.create('MyApp.view.MyView')
        }]

    });

in case 1 : i see the title of tab panel as "New Title"
in case 2 : i see the title of tab panel as ""

Thanks.

anantchoubey
  • 1
  • 1

1 Answers1

1

The xtype configuration option can be used to optimize Component creation and rendering. It serves as a shortcut to the full component name.

The major difference with the two approach is :

Case 1: "MyView" will not be created or rendered until the " UseMyView" panel is actually displayed in the browser. If the panel is never displayed then the "MyView" will never be created and will never consume any resources whatsoever.

Case 2 : "MyView" panel will be created immediately during the " UseMyView" panel's initialization.With many added Components, this approach could potentially slow the rendering of the page.

Saloo
  • 816
  • 6
  • 13