Panel HTML content not properly rendered on launch

[rwbaker]

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:

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:

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.');
            }
        }
    }
});

[mitchellsimoens]

Here is a better, more ST2 view:

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();
    }
});

[rwbaker]

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

[rwbaker]

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

[mitchellsimoens]

If you are using a native app wrapper then you can use the Ext.device.Geolocation