1. #1
    Sencha User
    Join Date
    Jan 2012
    Location
    Jacksonville, FL
    Posts
    38
    Answers
    2
    Vote Rating
    2
    rwbaker is on a distinguished road

      0  

    Default Answered: Panel HTML content not properly rendered on launch

    Answered: Panel HTML content not properly rendered on launch


    I have a panel in my app that displays information about a person's location (hard coded for this example). On the initial load of that view, the html property is set to 'Use your current location...'. This is just a place holder until they allow the app to use their current location.

    On the launch function of the controller, I call geo.updateLocation(). That functions logs the lat/long and sets the panel's HTML with an image and text. For some reason, the image doesn't load and the text doesn't wrap.

    I have a tap listener on this panel to allow users to refresh their location. When this tap event is triggered, the image/html is updated and it renders correctly.

    What's going on?

    Image of problem and code is below:


    geo-view-problem.png

    My view:

    Code:
    Ext.define('EOC.view.Home.GisStatus', {
        extend  : 'Ext.Panel',
    
    
        xtype   : 'gisStatus',
    
    
        id      : 'gisStatus',
        
        config  : {
            ui                          : 'gisStatus',
            scrollable                  : false,
            html                        : 'Use your current location to determine your flood and evacuation zone.',
    
    
            listeners : {
                tap     : {
                    fn: function() {
                        // Update GIS location
                        geo.updateLocation();
                    },
                    element: 'element'
                }
            },
        }
    });
    My controller:

    Code:
    Ext.define('EOC.controller.Home', {
        extend: 'Ext.app.Controller',
        
        config: {
            refs: {
                
            },
            control: {
    
    
            }
        },
    
    
        launch: function() {
            geo.updateLocation();
        }
    });
    
    
    var geo = Ext.create('Ext.util.Geolocation', {
        autoUpdate: false,
        listeners: {
            locationupdate: function(geo) {
                console.log('Latitude: ' + geo.getLatitude() + ' & Longitude: ' + geo.getLongitude());
    
    
                Ext.get('gisStatus').setHtml('<img src="/resources/images/map_100.png" class="gis left" /> You are not in an evacuation zone. <br/>You <strong>are</strong> in flood zone 3. <a href="#">Find out more on COJ.net</a>.');
    
    
            },
            locationerror: function(geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
                if(bTimeout){
                    console.log('Timeout occurred.');
                
                } else if (bPermissionDenied) {
                    console.log('Denied!');
                    Ext.get('gisStatus').setHtml('Tap to use your current location to determine your flood and evacuation zone.');
                
                } else {
                    console.log('Error occurred.');
                }
            }
        }
    });

  2. Here is a better, more ST2 view:

    Code:
    Ext.define('EOC.view.Home.GisStatus', {
        extend  : 'Ext.Container',
        xtype   : 'gisStatus',
    
        requires : [
            'Ext.util.Geolocation'
        ],
    
        config  : {
            ui              : 'gisStatus',
            scrollable      : false,
            html            : 'Use your current location to determine your flood and evacuation zone.',
            currentLocation : {
                autoUpdate : false
            }
        },
    
        initialize : function() {
            this.element.on('tap', 'updateLocation', this);
    
            this.on('painted', 'updateLocation', this);
    
            this.callParent();
        },
    
        applyCurrentLocation : function(loc) {
            if (loc) {
                loc = new Ext.util.Geolocation(loc);
            }
    
            return loc;
        },
    
        updateCurrentLocation : function(geo, oldGeo) {
            if (oldGeo) {
                geo.un({
                    scope          : this,
                    locationupdate : 'onLocationUpdate',
                    locationerror  : 'onLocationError'
                });
            }
    
            if (geo) {
                geo.on({
                    scope          : this,
                    locationupdate : 'onLocationUpdate',
                    locationerror  : 'onLocationError'
                });
            }
        },
    
        onLocationUpdate : function(geo) {
            console.log('Latitude: ' + geo.getLatitude() + ' & Longitude: ' + geo.getLongitude());
    
            this.setHtml('<img src="/resources/images/map_100.png" class="gis left" /> You are not in an evacuation zone. <br/>You <strong>are</strong> in flood zone 3. <a href="#">Find out more on COJ.net</a>.');
        },
    
        onLocationError : function(geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
            if (bTimeout) {
                console.log('Timeout occurred.');
            } else if (bPermissionDenied) {
                console.log('Denied!');
    
                this.setHtml('Tap to use your current location to determine your flood and evacuation zone.');
            } else {
                console.log('Error occurred.');
            }
        },
    
        updateLocation : function() {
            this.getCurrentLocation().updateLocation();
        }
    });

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,791
    Answers
    3465
    Vote Rating
    833
    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

      1  

    Default


    Here is a better, more ST2 view:

    Code:
    Ext.define('EOC.view.Home.GisStatus', {
        extend  : 'Ext.Container',
        xtype   : 'gisStatus',
    
        requires : [
            'Ext.util.Geolocation'
        ],
    
        config  : {
            ui              : 'gisStatus',
            scrollable      : false,
            html            : 'Use your current location to determine your flood and evacuation zone.',
            currentLocation : {
                autoUpdate : false
            }
        },
    
        initialize : function() {
            this.element.on('tap', 'updateLocation', this);
    
            this.on('painted', 'updateLocation', this);
    
            this.callParent();
        },
    
        applyCurrentLocation : function(loc) {
            if (loc) {
                loc = new Ext.util.Geolocation(loc);
            }
    
            return loc;
        },
    
        updateCurrentLocation : function(geo, oldGeo) {
            if (oldGeo) {
                geo.un({
                    scope          : this,
                    locationupdate : 'onLocationUpdate',
                    locationerror  : 'onLocationError'
                });
            }
    
            if (geo) {
                geo.on({
                    scope          : this,
                    locationupdate : 'onLocationUpdate',
                    locationerror  : 'onLocationError'
                });
            }
        },
    
        onLocationUpdate : function(geo) {
            console.log('Latitude: ' + geo.getLatitude() + ' & Longitude: ' + geo.getLongitude());
    
            this.setHtml('<img src="/resources/images/map_100.png" class="gis left" /> You are not in an evacuation zone. <br/>You <strong>are</strong> in flood zone 3. <a href="#">Find out more on COJ.net</a>.');
        },
    
        onLocationError : function(geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
            if (bTimeout) {
                console.log('Timeout occurred.');
            } else if (bPermissionDenied) {
                console.log('Denied!');
    
                this.setHtml('Tap to use your current location to determine your flood and evacuation zone.');
            } else {
                console.log('Error occurred.');
            }
        },
    
        updateLocation : function() {
            this.getCurrentLocation().updateLocation();
        }
    });
    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.

  4. #3
    Sencha User
    Join Date
    Jan 2012
    Location
    Jacksonville, FL
    Posts
    38
    Answers
    2
    Vote Rating
    2
    rwbaker is on a distinguished road

      0  

    Default Thank you!

    Thank you!


    Ah, perfect. Just checked the docs on Views to understand your changes a bit better. Thanks again. That fixed my problem!

  5. #4
    Sencha User
    Join Date
    Jan 2012
    Location
    Jacksonville, FL
    Posts
    38
    Answers
    2
    Vote Rating
    2
    rwbaker is on a distinguished road

      0  

    Default


    Now when I get the geolocation prompt, it uses the path of the index.html file, rather than the Application Name. Anyone ever seen this?

    Image:
    Screen Shot 2012-03-20 at 10.35.52 AM.png

  6. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,791
    Answers
    3465
    Vote Rating
    833
    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


    If you are using a native app wrapper then you can use the Ext.device.Geolocation
    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.

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