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
    37,074
    Answers
    3500
    Vote Rating
    854
    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
    37,074
    Answers
    3500
    Vote Rating
    854
    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