Sencha touch setActiveItem logic explanation - sencha-touch

Question

(complete re-edit of my previous post)
I'm trying to build my first Sencha touch app and i've got a problem.
In my viewport I have 2 xtype : Home and ContainerListAdress.
When I click on the ContainerListAdress icon the card slides to the list.
here is my code (in listcard.js):
// My List view card
myAPP.views.ListAdressCard = Ext.extend(Ext.List, {
id:'listadresscard',
styleHtmlContent: true,
// cardSwitchAnimation: 'slide',
// items: [{ xtype: 'detailcard' } ],
store: myAPP.ListStore,
itemTpl: '<div>{name}</div>',
grouped: true,
onItemDisclosure: function(){
myAPP.views.containerlistadresscard.setActiveItem('detailcard');
}
});
// My container for both the list and the detail view
myAPP.views.ContainerListAdressCard = Ext.extend(Ext.Panel, {
id: "containerlistadresscard",
iconCls: "search",
styleHtmlContent: true,
cardSwitchAnimation: 'slide',
layout:'card',
items: [{xtype:'listadresscard'}, {xtype:'detailcard'}]
});
Ext.reg('listadresscard', myAPP.views.ListAdressCard);
Ext.reg('containerlistadresscard', myAPP.views.ContainerListAdressCard);
Then in detailcard.js I have
DetailcardToolbar = new Ext.Toolbar ({
id:'detailbar',
title: 'station',
dock:'top'
});
myAPP.views.Detailcard = Ext.extend(Ext.Panel, {
id: 'detailcard',
styleHtmlContent: true,
html: 'Made from coffee',
dockedItem:[DetailcardToolbar]
});
Ext.reg('detailcard', myAPP.views.Detailcard);
My error is
Uncaught TypeError: Cannot call method 'setActiveItem' of undefined
If I camelcased containerlistadresscard I got
Uncaught TypeError: Object function (){h.apply(this,arguments)} has no method 'setActiveItem'
But the detailcard I want to set active is referenced in the container ?
Thanks for your help.
---------------------------EDIT----------------------------
I decided to put all in one page, just for clarity, but face the same issue
var myAPPDetailcard = new Ext.Panel ({
id: 'detailcard',
styleHtmlContent: true,
html: 'Made from coffee',
layout: 'fit'
});
var myAPPListAdressCard = new Ext.List ({
id:'listadresscard',
styleHtmlContent: true,
store: myAPP.ListStore,
itemTpl: '<div>{name}</div>',
grouped: true,
onItemDisclosure: function(){
myAPP.views.ContainerListAdressCard.setActiveItem(myAPPDetailcard);
}
});
// My container for both the list and the detail view
myAPP.views.ContainerListAdressCard = Ext.extend(Ext.Panel, {
id: "containerlistadresscard",
iconCls: "search",
styleHtmlContent: true,
cardSwitchAnimation: 'slide',
layout:'card',
items: [myAPPListAdressCard, myAPPDetailcard]
});
Ext.reg('containerlistadresscard', myAPP.views.ContainerListAdressCard);

Answer 1

No, Ext.extend() defines a class. Here you created a class this way:
myAPP.views.ContainerListAdressCard = Ext.extend(Ext.Panel, {
id: "containerlistadresscard",
iconCls: "search",
styleHtmlContent: true,
cardSwitchAnimation: 'slide',
layout:'card',
items: [myAPPListAdressCard, myAPPDetailcard]
});
Then you create an instance of it like this way:
var mainContainer = new myAPP.views.ContainerListAdressCard({
fullscreen : true
});
You can call setActiveItem() on this mainContainer variable, not on a class definition.
.....
onItemDisclosure: function(){
mainContainer.setActiveItem(myAPPDetailcard);
}
Hope this help.