Sencha touch setActiveItem logic explanation

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

Where did you define " myAPP.views.containerlistadresscard" variable? — Swar
The only thing I made with myAPP.views.containerlistadresscard is that I referenced it as an xtype item in the "myAPP.views.Viewport". — Matthieu
I try to walk in the footstep of github.com/senchalearn/Tabs-and-toolbars-demo — Matthieu
See, you didn't define any element named "myAPP.views.containerlistadresscard". You just created a class named "myAPP.views.ContainerListAdressCard" which are not same. Try putting a console.log(myAPP.views.containerlistadresscard) inside "onItemDisclosure" function and check what you get. — Swar
The console log returns 'undefined' I understand your point (I am new to JS but medium at PHP OOP). Is this what initComponent is for ? Loading classes ? — Matthieu

Swar Swar · Accepted Answer · 2011-11-18T12:03:12

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.

Sencha touch setActiveItem logic explanation

1 Answers