Sencha Touch Panel setActiveItem not working

Question

I am building an app with Sencha touch. I have my viewport as a Carousel and inside that carousel there are 2 panels.

The second panel in that viewport is also a container for 2 nested panels.

App.views.Viewport = Ext.extend(Ext.Carousel, {
    fullscreen: true,
    indicator: false,
    layout: 'card',
    cardSwitchAnimation: 'slide',
    initComponent: function() {
        Ext.apply(App.views, {
            mainWindow: new App.views.MainWindow(),
            categories: new App.views.Categories()
        });
        Ext.apply(this, {
            items: [
                App.views.mainWindow,
                App.views.categories
            ]
        });

        App.views.Viewport.superclass.initComponent.apply(this, arguments);
    }
});

App.views.Categories = Ext.extend(Ext.Panel, {
    fullscreen: true,
    layout: 'card',
    cardSwitchAnimation: 'slide',
    initComponent: function() {
        Ext.apply(App.views, {
            categoriesList: new App.views.CategoriesList(),
            categoryDetail: new App.views.CategoryDetail()
        });
        Ext.apply(this, {
            items: [
                App.views.categoryDetail,
                App.views.categoriesList
            ]
        });
        App.views.Viewport.superclass.initComponent.apply(this, arguments);
    }
});

Here's the code for the categoriesList

Ext.regModel('Contact', {
    fields: ['firstName', 'lastName']
});

App.ListStore = new Ext.data.Store({
    model: 'Contact',
    sorters: 'firstName',
    getGroupString : function(record) {
        return record.get('firstName')[0];
    },
    data: [
        {firstName: 'Julio', lastName: 'Benesh'},
    ]
});

App.views.catsList = new Ext.List({
    store: App.ListStore,
    itemTpl: '<div class="contact"><div class="app_icon"><img src="images/angry-birds.png" width="50" height="50" /></div><div class="app_name"><strong>{firstName}</strong> {lastName}<br /><img src="images/rating-icon.gif" /></div></div>',
    onItemDisclosure: function(record, btn, index) {
        App.views.categories.setActiveItem(
                    App.views.categoryDetail, options.animation
                );
    }
});

App.views.CategoriesList = Ext.extend(Ext.Panel, {  
    layout: 'fit',
    items: [App.views.catsList],
    initComponent: function() {
        App.views.Categories.superclass.initComponent.apply(this, arguments);
    }
});

onItemDisclosure of the list elements is being triggered. however, the setActiveItem for the App.views.categories is not switching to categoryDetail. I've been struggling to get this working. Any idea what i am doing wrong?

ilija139 ilija139 · Accepted Answer · 2011-10-01T12:22:14

The problem lies in this line:

 App.views.categories.setActiveItem(
                App.views.categoryDetail, options.animation
            );

You see you have an options object that it's undefined. You should use this instead:

 App.views.categories.setActiveItem(
                    App.views.categoryDetail, {type:'slide', direction:'left'}
                );

Or other type of animation.

Do you get some error log? Maybe there are some other issues why it's not working.

Update

Add this

onItemDisclosure: function(record, btn, index) { 
console.log('onItemDis fired');
try{

  Ext.dispatch({ controller: App.controllers.AppsList, action: 'show', id: record.getId(), animation: { type:'slide', direction:'left' } }); 

}catch(e){
   console.log(e);
  }
}

Then in the controller :

App.controllers.MyController = new Ext.Controller({ show: function(options) { 
console.log('controller called');
try{
App.views.categories.setActiveItem( App.views.categoryDetail, options.animation );
}catch(e){console.log(e);} } });

then paste the console logs you get here.

Sencha Touch Panel setActiveItem not working

1 Answers