1. #1
    Sencha User CSchmitz81's Avatar
    Join Date
    Nov 2012
    Location
    Saint Louis
    Posts
    33
    Answers
    3
    Vote Rating
    0
    CSchmitz81 is on a distinguished road

      0  

    Default Answered: Gmappanel - adding markers from controller

    Answered: Gmappanel - adding markers from controller


    I'm trying to add markers to a gmappanel using data returned from a store of event locations.

    The gmappanel is in a container that is initially hidden from the user. Once the user fills out a form and gets a successful reply from the store the container is shown by being set as the active item on a parent container with a card layout.

    I would like to add markers to the map based on data that gets returned from the store, but at the time the callback fires the gmappanel is drawn to the browser but the google instance of the map has not yet been created.

    I've tried adding various events to the gmappanel itself to pull the marker data and add it to the map after the google map instance has been created, but I can't seem to find an event that fires after it's creation.

    I'm able to do the process of adding the markers to the a google map in a test file just using the google maps api and raw javascript, but I can't get it to work in Sencha.

    Does anyone know of a way that I can add the markers based off of store data? I'm including the code below. Any help or even just a point in the right direction would be greatly appreciated.

    Code for the container with the card layout and the form that the user fills out:
    Code:
    Ext.define("CaRWedding.view.content.rsvp.LogIn", {
        extend: 'Ext.container.Container',
        xtype: 'rsvpLogin',
        layout: 'card',
        id: 'rsvpLoginPanel',
        requires: ['Ext.form.Panel', 'Ext.layout.container.Table'],
    
    
        config:{
            items:[
                {
                xtype            : 'form',
                layout           : {type: 'vbox'},
                    
                id               : 'rsvpLoginForm',
                styleHtmlContent : true,
                styleHtmlCls     : 'background',
                border           : false,
                    items:[
                        {
                        xtype  : 'container',
                        id     : 'loginFieldSet',
                        layout : {type: 'table', columns: 2},
                        border : 0,
                            items: [
                                {
                                    xtype : 'container',
                                    html  : 'Group Name',
                                    cls   : 'rsvpFieldLabel',
                                    width : 70
                                },
                                {
                                    xtype : 'textfield',
                                    name  : 'GroupName',
                                    id    : 'groupNameTextField',
                                    width : 200
                                },
                                {
                                    xtype : 'container',
                                    html  : 'Zip Code',
                                    cls   : 'rsvpFieldLabel',
                                    width : 70
                                },
                                {
                                    xtype : 'textfield',
                                    name  : 'zipCode',
                                    id    : 'zipCode',
                                    width : 75
                                },
                                {
                                    xtype : 'button',
                                    id    : 'rsvpSubmitButton',
                                    cls   : 'rsvpLoginButton',
                                    text  : 'Submit'
                                }
                            ]
                        }
    
    
                    ]
                },
                {
                    // the xtype of the rsvp list that contains the gmappanel
                    xtype:'rsvpList'
                }
            ]
        }
    });
    The code for the container that holds the gmappanel:
    Code:
    Ext.define("CaRWedding.view.content.rsvp.RsvpList", {
        extend: 'Ext.container.Container',
        xtype: 'rsvpList',
        requires: ['Ext.ux.GMapPanel'],
    
    
        config:{
            defaults: {flex: 1},
            items:[
                {
                    xtype            : 'container',
                    layout           : 'hbox',
                    styleHtmlContent : true,
                    styleHtmlCls     : 'background',
                    defaults         :{flex: 1},
                    items:[
                        {
                            xtype  : 'container',
                            layout : {type: 'vbox', pack: 'center', align: 'center'},
                            id     : 'rsvpListPanelLeft'
                        },
                        {
                            xtype: 'container',
                            id : 'mapContainer',
                            autoShow: true,
                                    layout: {type: 'fit', pack: 'center', align: 'center'},
    ​                               title: 'GMap Window',
                                    closeAction: 'hide',
    ​                               width: '100%',
    ​                               height:'100%',
                                    border: false,
    ​                               x: 40,
                                    y: 60,
    ​                               items: {
                                       xtype: 'gmappanel',
    ​                                   id: 'eventMap',
                                       center: {
    ​                                       geoCodeAddr: '2414 Menard Street, St. Louis, MO',
                                       }
    ​                              }
                        }
                    ]
                }
            ]
        }
    });

    The code for the controller method that submits the form, sets the rsvpList as the activeItem on the card layout, and (should) create the markers:
    Code:
    getEventListForGroupName: function (form, event, options){
        
        // Get the values the user has entered form the form
        var form      = this.getRsvp().getForm();
        var values    = form.getValues();
        var rsvpPanel = this.getRsvpPanel();
        
        // Get the specific values we're looking to pass to our store
        groupName = values.GroupName;
        zipCode   = values.zipCode;
    
    
        // If the values are populated, try loading the store
        if( groupName != "" && zipCode != ""){
    
    
            // Vet the store and the container we're going to add the buttons to.  
            var myEventStore = this.getEventListStore();
            var panel        = this.getEventList();
    
    
            // set the parameters for the store. These will feed in to the custom php that talks to the mysql database
            myEventStore.proxy.extraParams            = {};
            myEventStore.proxy.extraParams.callMethod = "getEventListByGroupName";
            myEventStore.proxy.extraParams.groupName  = groupName;
            myEventStore.proxy.extraParams.zipCode    = zipCode;
                        rsvpPanel.layout.setActiveItem(1);
            // load the store and look for the response. 
            myEventStore.load({
                callback: function (records, operation, success){
    
    
                    // If the php returns successfully with data
                    if(success == true){
    
    
                        // This shows the rsvp list container which has the gmappanel on it
                        // at this point the panel is showing, but the map itself has not rendered
                        rsvpPanel.layout.setActiveItem(1);
                        var map = Ext.getCmp('eventMap');
    
    
                        // Logic for creating the custom rsvp buttons
                        // All of this works and is not relevant to the marker creation problem
                        var buttonText = ""; 
                        var rsvpListContainer = Ext.getCmp('rsvpListPanelLeft');
                        for (var ct = 0; ct < records.length; ct++){
                            var x = records[ct];
                            buttonText = "<table class='RSVPButonTable'><tr><th colspan='2'>" + records[ct].data.description + "</th></tr><tr><td class='subDesc'>Location:</td><td class='subDesc'>Date and Time:</td></tr><tr><td>" + records[ct].data.locationDescription + "</td> <td>" + records[ct].data.eventDate + "</td></tr><tr><td class='addressTableData'>" + records[ct].data.address + "</td><td>" + records[ct].data.eventTime + "</td></tr></table>";
                            var attending = "";
                            if (records[ct].data.rsvpState == true){
                                attending =  " eventButton_attending";
                            }
                            rsvpListContainer.add(
                                Ext.create('Ext.container.Container',{
                                    html: "<div custom_button_id='EventButtonId" + records[ct].data._id + "' onclick=\"CaRWedding.getApplication().getController(\'SiteController\').buttonSwitcher(this)\">" + buttonText + "</div>",
                                    cls: "eventButton" + attending,
                                    CSguestId: records[ct].data.guestId,
                                    CSeventId: records[ct].data._id,
                                    CSrsvpState: records[ct].data.rsvpState,
                                    id: "EventButtonId" + records[ct].data._id
                                    }
                                )
                            );
                        // ================================================================================
                        // Here within the for loop is where I would like to create the markers.
                        // At this point, the gmappanel shows on the screen but the google map instance 
                        // itself has not been created.
                        // The records passed in contain the data needed to generate the markers but 
                        // I can't add them here because the map instances does not exist.
                        // ================================================================================
                            var marker = google.maps.Marker({
                                position: records[ct].data.latAndLng,
                                map: map
                            });
                            map.addMarker(marker);
                        }
    
    
    
    
                    // show an alert if the group name or zip code fields are empty. 
                    // CS debug - need to change this to a sencha window 
                    }else{
                        alert ("Invalid Group Name or Zip Code");
                    }
                }
            });
        // error message to show if the guest isn't found in the guest list.     
        }else{
            Ext.create('Ext.window.Window', {
                height           : 75,
                width            : 400,
                layout           : {type:'vbox', pack: 'center'},
                modal            : true,
                border           : false,
                styleHtmlCls     : 'errorMessage',
                styleHtmlContent : true,
                defaults         :{flex: 1},
                items            :[
                    {
                        xtype: 'text',
                        text: 'The value you entered is not on the list.'
                    },
                    {
                        xtype            : 'button',
                        text             : 'OK',
                        styleHtmlCls     : 'errorMessage',
                        styleHtmlContent : true,
                        border           : false,
                        handler          : function (){
                            var x = this.up('window');
                            x.close();
                        }
                    }
                ]
            }).show();
        }
    
    
    },

  2. Turns out I lied, the component has no getMap method, accessing the gmap property is correct.

    The map object gets created after the component is rendered. In the newer versions, the gmappanel fires a mapready event:

    Code:
    var map = comp.gmap,
         fn = function(){
             // do stuff;
         };
    if (!map) {
        comp.on('mapready', fn, this, {single: true});
    } else {
        fn();
    }

  3. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,833
    Answers
    453
    Vote Rating
    609
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    You're not adding it to the google map.

    Code:
    Ext.getCmp('eventMap')
    Returns an Ext.Component reference, the MapPanel is just a wrapper around DOM for the google API. You want to get the underlying Google Map object using getMap().
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  4. #3
    Sencha User CSchmitz81's Avatar
    Join Date
    Nov 2012
    Location
    Saint Louis
    Posts
    33
    Answers
    3
    Vote Rating
    0
    CSchmitz81 is on a distinguished road

      0  

    Default


    Hey, Thanks for the reply. I'm building this website to handle the rsvps for my upcoming wedding (which is right around the corner) and I've been having problems getting all of the answers I need so I super ​appreciate your quick reply.

    I actually was searching around for this before (and posted for it before) and couldn't find an answer.

    I wasn't able to find a sencha method called 'getMap()' to get the map object from the wrapper, and in the google api documentation I can find multiple getMap methods, but they're all for objects that have already been assigned to an existing map.

    I am able to get to the underlying google map object after my method and all of the following sencha processing is done by doing the following:

    Code:
    var mapContainer = Ext.getCmp('eventMap');
    var map = mapContainer.gmap;
    But at the point in the callback in my earlier method, the gmap property doesn't exist yet.

    What getMap method should I be using and what class does it belong to?

  5. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,833
    Answers
    453
    Vote Rating
    609
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Turns out I lied, the component has no getMap method, accessing the gmap property is correct.

    The map object gets created after the component is rendered. In the newer versions, the gmappanel fires a mapready event:

    Code:
    var map = comp.gmap,
         fn = function(){
             // do stuff;
         };
    if (!map) {
        comp.on('mapready', fn, this, {single: true});
    } else {
        fn();
    }
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  6. #5
    Sencha User CSchmitz81's Avatar
    Join Date
    Nov 2012
    Location
    Saint Louis
    Posts
    33
    Answers
    3
    Vote Rating
    0
    CSchmitz81 is on a distinguished road

      0  

    Default


    Awesome, I'll give that a try.

    What newer version of the sdk has the 'mapready' listener? I checked the 4.2.1 documentation and didn't find one.

  7. #6
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,833
    Answers
    453
    Vote Rating
    609
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    It's not part of the core so it may not be documented as fully as core classes. Look at the source, it's pretty basic.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  8. #7
    Sencha User CSchmitz81's Avatar
    Join Date
    Nov 2012
    Location
    Saint Louis
    Posts
    33
    Answers
    3
    Vote Rating
    0
    CSchmitz81 is on a distinguished road

      0  

    Default Perfect!

    Perfect!


    Tried it this morning and it worked!!:

    Code:
    Ext.define("CaRWedding.view.content.rsvp.RsvpList", {
        extend: 'Ext.container.Container',
        xtype: 'rsvpList',
        requires: ['Ext.ux.GMapPanel'],
    
    
        config:{
    		defaults: {flex: 1},
    		items:[
    			{
    				xtype            : 'container',
    				layout           : 'hbox',
    				styleHtmlContent : true,
    				styleHtmlCls     : 'background',
    				defaults         :{flex: 1},
    				items:[
    					{
    						xtype  : 'container',
    						layout : {type: 'vbox', pack: 'center', align: 'center'},
    						id     : 'rsvpListPanelLeft'
    					},
    					{
    						xtype: 'container',
    						id : 'mapContainer',
    						autoShow: true,
    		                layout: {type: 'fit', pack: 'center', align: 'center'},
    		                title: 'GMap Window',
    		                closeAction: 'hide',
    		                width: '100%',
    		                height:'100%',
    		                border: false,
    		                x: 40,
    		                y: 60,
    		                items: [
    			                {
    			                    xtype: 'gmappanel',
    			                    id: 'eventMap',
    			                    listeners:{
    			                    	'mapready':{
    			                    		fn: function(){
    			                    			alert ('map is ready');
    			                    			debugger;
    			                    		}
    			                    	}
    			                    },
    			                    center: {
    			                        geoCodeAddr: '2414 Menard Street, St. Louis, MO',
    			                    }
    			                }
    		                ]
    					}
    				]
    			}
    		]
        }
    });
    And I checked in the javascript console and the gmap:
    Screen Shot 2013-05-28 at 9.11.21 AM.png

    This is exactly what I was looking for. I can run from here with adding the markers in. Thanks again for your help!

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi