card layout setActiveItem not firing

Question

The setActiveItem function is firing but nothing happens and im not getting any error messages.., could someone tell me why this is not working?

Ext.regModel('team', {
fields: [
    {name: 'name', type: 'string'},
    ]
});

Dashboard = new Ext.Application({
    name:'Dashboard',
    launch: function(){
//Info list 
var detailPanel = new Ext.Panel({
        id:'detailPanel',
        dock:"top",
         items: [{
            fullscreen:true,
            xtype: 'list',
            store: new Ext.data.Store({
                model: 'team',
                getGroupString : function(record) {
                    return record.get('name')[0];
                },
                proxy: new Ext.data.AjaxProxy({
                    url: 'a.php/pool/listPools'
                    ,method:'post',
                    reader: {
                type: 'json',
                root: 'data',
                totalCount: 'count'
                     }
                })
                ,autoLoad:true 
            }),
            sorters: [{
            property: 'name',
            direction: 'asc'
             }],
            itemTpl:'<font size="4" face="Helvetica, Arial" color="black">{name}</font>',
            grouped: true,
            onItemDisclosure : true,
                  listeners : {
              itemtap : function(record,index,item,e){
if (e.getTarget('.x-list-disclosure')) {
                     var recPool = this.store.data.items[index];
                   //Ext.Msg.alert([index]);
                    var redirect = 'showpool.php'; 
                    window.location = redirect;
                 } 
                // else { Ext.Msg.alert("Item clicked!");}
               }
             }
        }]
    })
     var outer = new Ext.Panel({
                    fullscreen:true,
                    layout:'card',
                    items:[


                          detailPanel
                        ]
                    });

//------------------------------------Toolbar top
       var TopPanel = new Ext.Panel({
            id:'testview',
            fullscreen:true,
            style: "background-color: #GGG;",
             dockedItems: [
                                    {
                                        dock : 'top',
                                        xtype: 'toolbar',
                                        title: 'Pools',
                                        ui:'light',
                                        items: [
                                            {
                                                text: 'Logout',
                                                ui:'back',
                                                 handler: function(){
                                                              outer.setActiveItem('detailPanel', { type: 'slide', cover: false, direction: 'left'});
                                                  }


                                            }, {xtype: 'spacer'},
                                            {
                                                text: 'Refresh',
                                                ui:'action',
                                                handler: function(){
                                                            detailPanel.doLayout();
                                                  }
                                            }
                                        ]
                                    },
                  outer]
            });
    }
});

Answer 1

Actually card layout is used to switch between the views if there are two or more items are added to the panel. In your case outer panel consists of a single view . So it will display that panel always. Try adding another panel into the outer panel and call setActiveItem().

Answer 2

You used it as a string here:

outer.setActiveItem('detailPanel', 
    {type: 'slide', cover: false, direction: 'left'});

Use the variable instead:

outer.setActiveItem(detailPanel, 
    {type: 'slide', cover: false, direction: 'left'});

This should work.