1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    27
    Answers
    3
    Vote Rating
    0
    arcan9ne is on a distinguished road

      0  

    Question Answered: Ext.define & the 'alias' property

    Answered: Ext.define & the 'alias' property


    Hi all,

    I'm quite new to ExtJS 4.0 and hence, have only begun to use Ext.define. I've defined a grid as:

    Code:
    Ext.define('App.grid.inventory', {
      extend: 'Ext.grid.GridPanel',
      alias: 'widget.inventory_grd',
    
      initComponent : function() {
        Ext.apply(this, {
          //store: Ext.data.StoreManager.lookup('simpsonsStore'),
          store:new Ext.data.SimpleStore({
            id: 0,
            fields:[
              {name:'firstName'},
              {name:'lastName'}
            ]
            ,data:[
              ['Joe', 'Doe'],
              ['John', 'Black'],
              ['Sue', 'Brown'],
              ['Carin', 'White']
            ]
          }),
    .....
    I've realized that you can then call the xtype of "inventory_grd". Why is it not "widget.inventory_grd"? Can I use the alias for a model or a store as well? For example, if I had a store such as:
    Code:
    Ext.define('App.store.inventory', {
        extend: 'Ext.data.Store',
        //storeId: 'inventory_str',
        alias: 'store.inventory_str',
        fields:['first_name', 'last_name', 'phone_no'],
        data: [
          ["Test", "Tester", "12323"],
          ["Testing", "Tester", "8345345"],
          ["MyTest", "Istesting", "65432423"]        
        ]
    });
    Could I then in the grid store property use 'inventory_str', or should it be 'store.inventory_str'?


    Kind Regards

  2. Alias
    Think of the 'widget.' prefix as namespace. This is also to avoid name clashes - you can have both let's say a widget and a proxy class with alias 'inventory'.

    When referencing a class using the 'alias' Ext will prefix the passed name with the corresponding namespace internally before looking up the class. The context usually determines the namespace - a component xtype declaration implies 'widget.', a proxy config object implies 'proxy.', etc.
    Usually you CANNOT pass in an already prefixed alias (like 'widget.panel' where an xtype is expected), since those methods will usually stubbornly add the namespace prefix (resulting in 'widget.widget.panel') no matter what.

    What you CAN do is instantiate any class by any of its aliases using Ext.create(). These are all equivalent:

    Code:
    Ext.create('Ext.form.Panel');
    Ext.create('widget.form');
    Ext.create('Ext.FormPanel');
    
    Ext.widget('form');
    Ext.ComponentManager.create({ xtype: 'form' });
    Compare this to the class header of Ext.form.Panel:

    Code:
    Ext.define('Ext.form.Panel', {
        extend:'Ext.panel.Panel',
        alias: 'widget.form',
        alternateClassName: ['Ext.FormPanel', 'Ext.form.FormPanel'],

    StoreId
    StoreId is a completely different thing though!

    It refers to actual *instances* of the Store class (instances are objects created with Ext.create()), not the class itself. These instances are handled by Ext.data.StoreManager (and *not* ClassManager like alias names).

    That is why usually you assign a storeId when creating a specific *instance* of a Store (class).
    Code:
    var myStore = Ext.create('myapp.MyStoreClass', {
      storeId: 'MyStoreId'
    });
    If you define a storeId for a Store class (Ext.define('myapp.MyStoreClass', { storeId: 'xxx' })), that might actually call for troubles when creating more than one instance of this Store class. Upon creation, each store *instance* will register itself with the StoreManager using the same storeId and overwrite the previously registered store.

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


    If you look at Ext.ClassManager.maps.aliasToName Object, you will see all the aliases currently loaded. Notice all the different types... association, proxy, store, plugin... a bunch that most don't know about.

    storeId is probably the easiest way to get a Store instance but it's registered with StoreManager which is good if you need a global store.
    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.

  4. #3
    Sencha User mberrie's Avatar
    Join Date
    Feb 2011
    Location
    Bangkok, Thailand
    Posts
    506
    Answers
    26
    Vote Rating
    14
    mberrie will become famous soon enough mberrie will become famous soon enough

      2  

    Default


    Alias
    Think of the 'widget.' prefix as namespace. This is also to avoid name clashes - you can have both let's say a widget and a proxy class with alias 'inventory'.

    When referencing a class using the 'alias' Ext will prefix the passed name with the corresponding namespace internally before looking up the class. The context usually determines the namespace - a component xtype declaration implies 'widget.', a proxy config object implies 'proxy.', etc.
    Usually you CANNOT pass in an already prefixed alias (like 'widget.panel' where an xtype is expected), since those methods will usually stubbornly add the namespace prefix (resulting in 'widget.widget.panel') no matter what.

    What you CAN do is instantiate any class by any of its aliases using Ext.create(). These are all equivalent:

    Code:
    Ext.create('Ext.form.Panel');
    Ext.create('widget.form');
    Ext.create('Ext.FormPanel');
    
    Ext.widget('form');
    Ext.ComponentManager.create({ xtype: 'form' });
    Compare this to the class header of Ext.form.Panel:

    Code:
    Ext.define('Ext.form.Panel', {
        extend:'Ext.panel.Panel',
        alias: 'widget.form',
        alternateClassName: ['Ext.FormPanel', 'Ext.form.FormPanel'],

    StoreId
    StoreId is a completely different thing though!

    It refers to actual *instances* of the Store class (instances are objects created with Ext.create()), not the class itself. These instances are handled by Ext.data.StoreManager (and *not* ClassManager like alias names).

    That is why usually you assign a storeId when creating a specific *instance* of a Store (class).
    Code:
    var myStore = Ext.create('myapp.MyStoreClass', {
      storeId: 'MyStoreId'
    });
    If you define a storeId for a Store class (Ext.define('myapp.MyStoreClass', { storeId: 'xxx' })), that might actually call for troubles when creating more than one instance of this Store class. Upon creation, each store *instance* will register itself with the StoreManager using the same storeId and overwrite the previously registered store.

  5. #4
    Sencha User
    Join Date
    Sep 2011
    Posts
    27
    Answers
    3
    Vote Rating
    0
    arcan9ne is on a distinguished road

      0  

    Thumbs up


    Thank you for your replies, it's a lot clearer to me now. I've started to play with it and am grasping the new concept

Thread Participants: 2

Tags for this Thread