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().