PDA

View Full Version : Component Ids are Global ? and other issues...



mrpo
31 Oct 2011, 7:53 AM
Hi,

I'm working on a sencha touch application using MVC (or trying to), and found a little problem:


I've had defined some views, extending Panel and registering them with xtypes.


First, I have a view called CitiesFilter with it's own xtype:


bcsc.views.CitiesFilter = Ext.extend(Ext.Panel, { fullscreen: true,
items:[{
id:'list',
xtype: 'list',
store: 'citiesstore'
}]
});

Ext.reg('xtype-cities-filter', bcsc.views.CitiesFilter);


Then, a second view called StatesFilter with another xtype:



bcsc.views.StatesFilter = Ext.extend(Ext.Panel, { fullscreen: true,
items:[{
id:'list',
xtype: 'list',
store: 'statesstore'
}]
});

Ext.reg('xtype-states-filter', bcsc.views.StatesFilter);


And finally, a view that hopes to use lazy instantiation with de previously defined xtypes:



bcsc.views.Filters = Ext.extend(Ext.Panel, {
fullscreen: true,
items:[
{
id: 'cities-filter',
xtype: 'xtype-cities-filter',
},
{
id: 'states-filter',
xtype: 'xtype-states-filter',
}, ]
});
Ext.reg('xtype-filters', bcsc.views.Filters);



The problem I'm having is that the list inside CitiesFilter, gets replaced by the one in StatesFilter or the other way around if I exchange the items order. So I'm guessing the Ids are global, since using different ids for the lists fixes the problem.

My question is: Which would be the best way to acces the items inside each view?

Right now i have this:

bcsc.views.main.items.get("filters").setActiveItem('states-filter');

And if i had to access the list it would be something like:

bcsc.views.main.items.get("filters").setActiveItem('states-filter').items.get('list');

Is the a better way to deal with this?

Im using this approach, beacause I'm loading some stores, and need them ready before creating the views.

Thanks in advance for any comment, suggestion.

mitchellsimoens
1 Nov 2011, 5:23 AM
Yes, every time you specify an id, it gets put into the Ext.ComponentMgr so if you have two components with the same id, the last one will take over that id.

To get around this, you can use ComponentQuery...


cmp.down('xtype-cities-filter list');

//this will get the first child with xtype of list under a component with xtype of xtype-cities-filter

If there are two components with xtype of list under xtype-cities-filter, then you can set properties on each list that you can reference in your ComponentQuery string:


cmp.down('xtype-cities-filter list[foo=bar]');

So that will look to see if the foo property on the list is equal to 'bar' and will return that match. If you use cmp.query('...') it will return an array of matches but down will only return the first match.

mrpo
2 Nov 2011, 9:42 AM
Thanks!! , i've also found about itemId and id :)

Didn't found any hint in the documentation about the diference though