1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    26
    Vote Rating
    2
    rossmurphy is on a distinguished road

      0  

    Default Unanswered: Best approach to swapping panels using segmented button

    Unanswered: Best approach to swapping panels using segmented button


    I have a tab panel with multiple items like so:

    Code:
    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.

    Code:
    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.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,735
    Answers
    3364
    Vote Rating
    756
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Use setActiveItem
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Location
    Mumbai ,India
    Posts
    4
    Vote Rating
    0
    pprateek is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha User
    Join Date
    Apr 2013
    Posts
    1
    Vote Rating
    0
    praks16 is on a distinguished road

      0  

    Default


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

    Thanks

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar