PDA

View Full Version : Ext.define & the 'alias' property



arcan9ne
14 Sep 2011, 3:34 AM
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:


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:

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

mitchellsimoens
14 Sep 2011, 7:48 AM
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.

mberrie
14 Sep 2011, 8:01 PM
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:



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:



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).


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.

arcan9ne
15 Sep 2011, 3:21 AM
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 :)