1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    26
    Vote Rating
    0
    Answers
    1
    rhomb is on a distinguished road

      0  

    Default Unanswered: General understanding of xtype vs Ext.create

    Hello there,

    I realized a couple of times, that certain things in Sencha Touch don't seem to work as expected when using Ext.create, but work exactly as expected when just using the xtype.

    Example Setup:
    I have a Container with a button:
    Code:
    var productContainer = Ext.create('Ext.Container', {
        title: 'testContainer',
            layout: 'card',
        items: [
            {
                xtype: 'button',
                id: 'cartButton',
                text: 'Add to Cart',
                handler: function () {
                        console.log('test');
                    }
                }
             ],
    });
    The given container is in a tabPanel. The button handler doesn't work at all. I tried several things that came to my mind, like event delegation, addListener and so on. It just doesn't work.

    If I specify the Container like so:
    Code:
    var productContainer = {
        xtype: 'container',
            layout: 'card',
        title: 'heyhp',
        items: [
            {
                xtype: 'button',
                id: 'cartButton',
                text: 'Add to Cart',
                handler: function () {
                        console.log('test');
                    }
            },
        ],
    };
    Everything works fine, the only thing I changed is that I don't create the container over Ext.create but over an xtype.

    I noticed similar behavior a couple of times while messing with sencha touch, but after messing with this for at least 3-4 hours I really want to know why it didn't work with Ext.create?
    Most likely I'm missing some general knowledge I can't find on google, maybe somebody is so kind to enlighten me?

    Thanks
    rhomb

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,960
    Vote Rating
    1187
    Answers
    3805
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default

    Ext.create is just like using the new keyword... it will create the class right then and there.

    Using xtype, this is what is called lazy-instantiation and the class will not be created until it is needed.

    So basically it's about when the class is to be actually created (instantiated).
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    26
    Vote Rating
    0
    Answers
    1
    rhomb is on a distinguished road

      0  

    Default

    Thanks Mitchell,
    thats what I thought, anyhow I don't understand what made the difference. It should've worked just like that.

    If you're saying that it shouldn't make any difference, I unfortunately still don't get why I didn't work in the first place.

    For now, I'll just let it be, and work with xtypes mostly.

    I appreciate the help though, thanks.

  4. #4
    Sencha User
    Join Date
    Sep 2013
    Posts
    4
    Vote Rating
    0
    vizay141 is on a distinguished road

      0  

    Default

    Quote Originally Posted by mitchellsimoens View Post
    Ext.create is just like using the new keyword... it will create the class right then and there.

    Using xtype, this is what is called lazy-instantiation and the class will not be created until it is needed.

    So basically it's about when the class is to be actually created (instantiated).
    Hi mitchellsimoens,

    Can you provide any example to check performance diff between Ext.Create and Xtype ?

  5. #5
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,960
    Vote Rating
    1187
    Answers
    3805
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default

    Quote Originally Posted by vizay141 View Post
    Hi mitchellsimoens,

    Can you provide any example to check performance diff between Ext.Create and Xtype ?
    Ext.create and xtype are two different things.

    xtype is an alias to a class name. For example, the xtype 'component' will map to Ext.Component and the xtype 'gridpanel' will map to Ext.grid.Panel. This is because of the xtype property in the Ext.define for those classes. Here is a custom component:

    Code:
    Ext.define('MyApp.view.Main', {
        extend : 'Ext.container.Container',
        xtype  : 'myapp-main'
    });
    Here, the class name is MyApp.view.Main and the xtype 'myapp-main' is an alias that will map to that MyApp.view.Main class.

    Ext.create is a means to create an instance of a class. To create an instance of the above MyApp.view.Main, you can do things like this:

    Code:
    var instance = Ext.create('MyApp.view.Main', {});
    Code:
    var instance = new MyApp.view.Main({});
    To create an instance via the xtype, there are two ways: use Ext.create or via lazy instantiation within an items array.

    Code:
    var instance = Ext.create({
        xtype : 'myapp-main'
    });
    Code:
    Ext.create('Ext.container.Container', {
        items : [
            {
                xtype : 'myapp-main'
            }
        ]
    });
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #6
    Sencha User
    Join Date
    Sep 2013
    Posts
    4
    Vote Rating
    0
    vizay141 is on a distinguished road

      0  

    Default

    Quote Originally Posted by mitchellsimoens View Post
    Ext.create and xtype are two different things.

    xtype is an alias to a class name. For example, the xtype 'component' will map to Ext.Component and the xtype 'gridpanel' will map to Ext.grid.Panel. This is because of the xtype property in the Ext.define for those classes. Here is a custom component:

    Code:
    Ext.define('MyApp.view.Main', {
        extend : 'Ext.container.Container',
        xtype  : 'myapp-main'
    });
    Here, the class name is MyApp.view.Main and the xtype 'myapp-main' is an alias that will map to that MyApp.view.Main class.

    Ext.create is a means to create an instance of a class. To create an instance of the above MyApp.view.Main, you can do things like this:

    Code:
    var instance = Ext.create('MyApp.view.Main', {});
    Code:
    var instance = new MyApp.view.Main({});
    To create an instance via the xtype, there are two ways: use Ext.create or via lazy instantiation within an items array.

    Code:
    var instance = Ext.create({
        xtype : 'myapp-main'
    });
    Code:
    Ext.create('Ext.container.Container', {
        items : [
            {
                xtype : 'myapp-main'
            }
        ]
    });

    Thank you for your answer.

    I know the diff b/w Ext.create and xtype.
    I did not understand one thing about lazy instantiation
    If any thing added to items those items are lazliy initialized ?

    How can we say xtype is lazy instantiation ?
    How to check performance impact if we use Ext.create rather than xtype ?

    Can you explain with code ?

    I think you under stand my question..

    Thanks,
    Vizay

  7. #7
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,960
    Vote Rating
    1187
    Answers
    3805
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default

    Lazy instantiation is best described when defining a class:

    Code:
    Ext.define('MyApp.view.Main', {
        extend : 'Ext.container.Container',
        xtype  : 'myapp-main',
    
        items : [
            {
                xtype : 'foo'
            }
        ]
    });
    In this class, I have one child item with the xtype of 'foo'. This child item will only be created when it is needed to be created which is when the parent component (MyApp.view.Main) is instantiated. So when you do this:

    Code:
    Ext.create('MyApp.view.Main');
    The child items are then instantiated, this is "lazy instantiation". Using Ext.create, this is also "lazy instantiation":

    Code:
    Ext.create('MyApp.view.Main', {
        items : [
            {
                xtype : 'foo'
            }
        ]
    });
    In contrast, this is NOT "lazy instantiation":

    Code:
    Ext.create('MyApp.view.Main', {
        items : [
            Ext.create('Foo')
        ]
    });
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  8. #8
    Sencha User
    Join Date
    Sep 2013
    Posts
    4
    Vote Rating
    0
    vizay141 is on a distinguished road

      0  

    Default

    Quote Originally Posted by mitchellsimoens View Post
    Lazy instantiation is best described when defining a class:

    Code:
    Ext.define('MyApp.view.Main', {
        extend : 'Ext.container.Container',
        xtype  : 'myapp-main',
    
        items : [
            {
                xtype : 'foo'
            }
        ]
    });
    In this class, I have one child item with the xtype of 'foo'. This child item will only be created when it is needed to be created which is when the parent component (MyApp.view.Main) is instantiated. So when you do this:

    Code:
    Ext.create('MyApp.view.Main');
    The child items are then instantiated, this is "lazy instantiation". Using Ext.create, this is also "lazy instantiation":

    Code:
    Ext.create('MyApp.view.Main', {
        items : [
            {
                xtype : 'foo'
            }
        ]
    });
    In contrast, this is NOT "lazy instantiation":

    Code:
    Ext.create('MyApp.view.Main', {
        items : [
            Ext.create('Foo')
        ]
    });
    Thank you for your answer.

    In the following case first parent is created then childs are created

    Code:
    Ext.create('MyApp.view.Main', {
        items : [
            {
                xtype : 'foo'
            }
        ]
    });
    In the following case parent, childs are instantiated at the same time

    Code:
    Ext.create('MyApp.view.Main', {
        items : [
            Ext.create('Foo')
        ]
    });
    This is my understanding from your answer. Am i correct ?

    But in the component life cycle we have 3 phases right

    Initialization
    Rendering
    Destroy

    In the initialization phase's initComponent method child instances are created.
    until and unless initComponent executed completely parent component is not going create.

    How can we say parent is created first after that childs are created ?

  9. #9
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,960
    Vote Rating
    1187
    Answers
    3805
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default

    Little backwards for lazy instantiation. The children are created when the parent is created. So when you create the parent, in the initComponent there is a call to initItems which goes through it's items array (and dockedItems if subclass of panel) and creates instances of all it's children.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  10. #10
    Sencha User
    Join Date
    Sep 2013
    Posts
    4
    Vote Rating
    0
    vizay141 is on a distinguished road

      0  

    Default

    Quote Originally Posted by mitchellsimoens View Post
    Little backwards for lazy instantiation. The children are created when the parent is created. So when you create the parent, in the initComponent there is a call to initItems which goes through it's items array (and dockedItems if subclass of panel) and creates instances of all it's children.
    That means until and unless childs are created parent is not going to create. so childs created first after that parent is created.


    Ext.create('MyApp.view.Main', { items : [ { xtype : 'foo' } ] });

    In the above case, foo (child ) is created first after that parent ( Main ) is created..
    then how we can say it is lazy instantiation ?

Thread Participants: 2