Best approach to swapping panels using segmented button

[rossmurphy]

I have a tab panel with multiple items like so:

store.App = Ext.extend(Ext.TabPanel, {    fullscreen: true,
    tabBar: {
        ui: 'gray',
        dock: 'bottom',
        layout: { pack: 'center' }
    },
    cardSwitchAnimation: false,
    initComponent: function() {


        // detect internet connection
        if (navigator.onLine) {
            
            this.items = [{
                xtype: 'storeview',
        title: 'Stores',
                iconCls: 'locate'
            }, {
                xtype: 'favouriteslist',
        //html: 'this is the favourites panel in the tab panel',
                title: 'Favourites',
                iconCls: 'favourites'
            }, {
                xtype: 'resultslist',
                title: 'Search',
                iconCls: 'search'
            }, {
                title: 'About',
        html: 'this is an about panel in the tab panel',
                iconCls: 'info'
                //xtype: 'location'
            }];
            
        } else {
            
            this.on('render', function(){
                this.el.mask('No internet connection.');
            }, this);
            
        }
        
        store.App.superclass.initComponent.call(this);
    }
    
});

In the store view tab panel (see below), I would like to have a map view and a list view which would be swapped out using a segmented button.

store.views.StoreView = Ext.extend(Ext.Panel, {
    coords: [37.788115, -122.402222],
    layout: 'card',
    initComponent: function(){
    
        var position = new google.maps.LatLng(this.coords[0], this.coords[1]);
        
        var segmentedButton = new Ext.SegmentedButton({
            items: [
                {
                    text: 'Map',
                    padding: '0 25 0 25',
                    pressed: true,
                    handler: {
                        // change to map view
                    }
                },
                {
                    text   : 'List',
                    padding: '0 25 0 25',
                    handler: {
                        //change to results view
                    }
                }
            ],
            listeners: {
                toggle: function(container, button, pressed){
                    console.log("User toggled the '" + button.text + "' button: " + (pressed ? 'on' : 'off'));
                }
            }
        });
        
        this.resultslist = new store.views.ResultsList();
        
        this.dockedItems = [{
            xtype: 'toolbar',
            items: [segmentedButton],
            layout: { pack: 'center' }
        }]
        
        var infowindow = new google.maps.InfoWindow({
            content: this.mapText
        });
        
        this.map = new Ext.Map({
            useCurrentLocation: true,
            mapOptions : {
                zoom: 14,
                navigationControlOptions: {
                    style: google.maps.NavigationControlStyle.DEFAULT
                }
            },
            listeners: {
                maprender : function(comp, map) {
                    
                    var marker = new google.maps.Marker({
                         position: position,
                         title : 'Your location!',
                         map: map
                    });


                    infowindow.open(map, marker);


                    google.maps.event.addListener(marker, 'click', function() {
                         infowindow.open(map, marker);
                    });
                }
            }
        });
        
        this.items = [this.map];
        
        store.views.StoreView.superclass.initComponent.call(this);
    }
});


Ext.reg('storeview', store.views.StoreView);

Does anyone know how I can swap the map and resultlist panels when the segmented button is clicked?

Thanks.

[mitchellsimoens]

Use setActiveItem

[pprateek]

Hi,

I am facing the same problem.
I have the segmented button having three items . Now i want to load view on click of segment button.
How to use the setActiveItem() function to load different views
Please share some sample code how to do this.

Thanks in advance.

[praks16]

Can you please tell me how this was done? Even i am facing the same problem. I just started learning Sencha.

Thanks