Results 1 to 5 of 5

Thread: Panel HTML content not properly rendered on launch

  1. #1
    Sencha User
    Join Date
    Jan 2012
    Location
    Jacksonville, FL
    Posts
    38
    Answers
    2
    Vote Rating
    2
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,336
    Answers
    3885
    Vote Rating
    1297
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    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
      0  

    Default 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
      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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,336
    Answers
    3885
    Vote Rating
    1297
      0  

    Default

    If you are using a native app wrapper then you can use the Ext.device.Geolocation
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •