I'm developing my first Sencha Touch app and have been experiencing some odd behavior with the useCurrentLocation setting of the Map component. For example this correctly displays a map centered on your current location:

Code:
new Ext.Application({
    name: 'PDXResponder',
    launch: function() {
        PDXResponder.map = new Ext.Map({
            title: 'Map',
            iconCls: 'maps',
            useCurrentLocation: true,
            mapOptions: {
                zoom: 11
            }
        });
        
        PDXResponder.views.Viewport = Ext.extend(Ext.TabPanel, {
            fullscreen: true,
            items: [
                PDXResponder.map
            ]
        });
                
        this.views.viewport = new this.views.Viewport();
    }
});
But most of the best practices I've seen recommend structuring your app with the view code contained in separate JavaScript files. So I tried this (both scripts are loaded in my index.html file):

app.js:
Code:
new Ext.Application({
    name: 'PDXResponder',
    launch: function() {
        this.views.viewport = new this.views.Viewport();
    }
});
map.js:
Code:
PDXResponder.map = new Ext.Map({
    title: 'Map',
    iconCls: 'maps',
    useCurrentLocation: true,
    mapOptions: {
        zoom: 11
    }
});

PDXResponder.views.Viewport = Ext.extend(Ext.TabPanel, {
    fullscreen: true,
    items: [
        PDXResponder.map
    ]
});
The map is displayed, but it's not centered on my current location. I did some debugging and it appears the problem resolves around the fact that when the Ext.Map component is created in map.js that the Exp.supports.GeoLocation property isn't initialized yet and the Map component obviously relies on this property. (But the property is initialized by the time the launch() event fires so the first example works correctly.)

Is this a bug or is there a better way to structure my code so that it will work correctly?