Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: class vs xtype ??

  1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    4
    Vote Rating
    0
      0  

    Default 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,

    Germn.

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Nov 2009
    Location
    Uruguay
    Posts
    50
    Vote Rating
    1
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  5. #5
    Sencha User
    Join Date
    Nov 2009
    Location
    Uruguay
    Posts
    50
    Vote Rating
    1
      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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  7. #7
    Touch Premium Member
    Join Date
    Jan 2012
    Posts
    49
    Vote Rating
    1
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  9. #9
    Sencha User
    Join Date
    May 2011
    Posts
    15
    Vote Rating
    1
      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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •