1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    4
    Vote Rating
    0
    german.larrosa is on a distinguished road

      0  

    Default class vs xtype ??

    class vs xtype ??


    Hi,

    I know that you can use the properties xclass or xtype in order to instantiate a class in Sencha 2.x but actually I wanna know the differences between them, or even better, which is the best way (performance) to instantiate a class in Sencha 2x ?

    Thanks in advance,

    Germán.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,549
    Vote Rating
    873
    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


    Code:
    {
        xtype : 'something'
    }
    Code:
    {
        xclass : 'MyApp.util.Foo'
    }
    There is technically no difference between them. xclass can be used for things that aren't components.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    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
    Nov 2009
    Location
    Uruguay
    Posts
    49
    Vote Rating
    1
    milton9480 is on a distinguished road

      0  

    Default Great question! And what about alias.

    Great question! And what about alias.


    Quote Originally Posted by mitchellsimoens View Post
    Code:
    {
        xtype : 'something'
    }
    Code:
    {
        xclass : 'MyApp.util.Foo'
    }
    There is technically no difference between them. xclass can be used for things that aren't components.
    Mitchell, what about alias definition ? There is a way that I've found in Sencha pages that uses alias: 'widget.cmpname'. What's the difference with others ?

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,549
    Vote Rating
    873
    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


    alias just defines an xtype for components. It's the type of alias and the name <type>.<name>

    So 'widget.cmpname' is saying that the type of alias is a widget and the name is cmpname. For the widget, the name is also the xtype.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    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.

  5. #5
    Sencha User
    Join Date
    Nov 2009
    Location
    Uruguay
    Posts
    49
    Vote Rating
    1
    milton9480 is on a distinguished road

      0  

    Default


    Tanks Mitchell for your time and quick responses!!!

    Ok, I'm not clear now about the difference between use widgets or just xtypes.
    When I define a component, I can use
    Code:
    alias: 'widget.mypanel'
    or just
    Code:
    xtype: 'mypanel'
    .
    Then I can use:
    Code:
    {xtype: 'mypanel'}
    in both cases. Correct?
    Then, I've seen a code sample at API where it says that widgets allows to use the following:
    Code:
    Ext.define('MyApp.CoolPanel',{
        extend:'Ext.panel.Panel',
       alias:['widget.coolpanel'],
        title:'Yeah!'});
    
    // Using Ext.create
    Ext.widget('widget.coolpanel');
    // Using the shorthand for widgets and in xtypes
    Ext.widget('panel',{
        items:[
         {xtype:'coolpanel', html:'Foo'},
         {xtype:'coolpanel', html:'Bar'}
       ] 
    });
    
    So, what's the real difference between those options, and when it should be used? Is there any difference in performance? Can I just use xtype always to define my custom components, rather to use alias and widgets? Which is the advantage of alias and widgets?

    Thanks again for your help!


    Quote Originally Posted by mitchellsimoens View Post
    alias just defines an xtype for components. It's the type of alias and the name <type>.<name>

    So 'widget.cmpname' is saying that the type of alias is a widget and the name is cmpname. For the widget, the name is also the xtype.

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,549
    Vote Rating
    873
    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


    You alias vs xtype will result the same thing.

    If you use

    Code:
    { xtype : 'mypanel' }
    That component will only be created when needed (lazy instantiation).

    If you use

    Code:
    Ext.widget('mypanel');
    That component will be created right away (direct instantiation).

    The benefit of lazy instantiation is you have a small object in memory until it's needed then it will be created into a full blown component. Down side is you don't have access to methods and such on that until it's created into a component, this is very rarely come upon.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    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.

  7. #7
    Touch Premium Member
    Join Date
    Jan 2012
    Posts
    49
    Vote Rating
    1
    luiscortes is on a distinguished road

      0  

    Default Great question, I was struggling too

    Great question, I was struggling too


    I guess what might help me:

    Is some informational/overview page which lets me know what are components, and any other high level definitions I should know.

    When and why I should use:
    xclass, xtype, alias, id, etc.

    How should I access these objects ? Ext.getCmp ? I think I have experimented with these, and it is mind boggling to me right now when to use one verses another.

    Is there a webpage with all these answers. I guess it isn't clear to me which is which. It would be nice to get the 50000 ft. view of all these concepts.

    thanks for your help.

  8. #8
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,549
    Vote Rating
    873
    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


    I would never use id, it will get you into trouble fast without you knowing it's coming (collisions). ComponentQuery is a much more robust and flexible solution to resolve components and it uses xtype and properties to resolve it:

    example:

    Code:
    panel list[foo=bar]
    That would get a list that has a property foo that is set to 'bar' and is a child of a panel.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    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.

  9. #9
    Sencha User
    Join Date
    May 2011
    Posts
    15
    Vote Rating
    1
    sergiob is on a distinguished road

      0  

    Default


    Mitchell, if some component has xtype:'something1' and class:'something2' which property has priority (assuming that the class and the alias point to different classes)?
    Quote Originally Posted by mitchellsimoens View Post
    Code:
    {
        xtype : 'something'
    }
    Code:
    {
        xclass : 'MyApp.util.Foo'
    }
    There is technically no difference between them. xclass can be used for things that aren't components.

  10. #10
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,549
    Vote Rating
    873
    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 sergiob View Post
    Mitchell, if some component has xtype:'something1' and class:'something2' which property has priority (assuming that the class and the alias point to different classes)?
    xclass will take priority over xtype:

    Code:
    var container = new Ext.Container({
        fullscreen : true,
        items      : {
            xtype   : 'panel',
            xclass  : 'Ext.Container'
        }
    });
    
    console.log(container.down('panel')); //null, means this is Ext.Container
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    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.