I'm working through my ST2 app, and decided that we need to implement url navigation... by this I mean, I want HashBang urls included so that I can jump to a specific view.


IE:
http://example.com/#!home/index
http://example.com/#!more/index


Here's a snippet of my app, and I'm hoping for some instruction on adding this feature.


App/Index.js
PHP Code:
Ext.Loader.setConfig({
    
enabledtrue,
    
disableCachingtrue // Todo: Switch to 'false' for production.,
});
Ext.application({


    
name'rpc',
    
appFolder'app',
    
controllers: [
        
'home',
        
'bible'
        
'video',
        
'contact',
        
'more'
    
], 
    
launch: function () {


        
console.log('Ext.application ~ launch'),
        
Ext.create('Ext.TabPanel', {
            
fullscreentrue,
            
tabBarPosition'bottom',
            
items: [{
                
title'Home',
                
iconCls'home',
                
xtype'home-indexView'
            
}, {
                
title'More',
                
iconCls'more',
                
xtype'more-indexView'
            
}]
        });
    },
    
initialize: function() {
        
console.log('Ext.application ~ initialize');
        
this.callParent();
    }
}); 

App/Controllers/HomeController.js
PHP Code:
Ext.define('rpc.controller.home', {
    
extend'Ext.app.Controller',
    
views: ['home.indexView'],
    
stores: [],
    
refs: [],
    
    
init: function () {
        
console.log('rpc.controller.home ~ init');
    },


    
index: function () {
        
console.log('rpc.controller.home ~ index');
    }
}); 

App/Views/Home/indexView.js


PHP Code:
Ext.define('rpc.view.home.indexView', {
    
extend'Ext.Panel',
    
alias'widget.home-indexView',
    
config: {
       
scrollabletrue,
        
items: [{
            
xtype'toolbar',
            
title'RockPointe Mobile',
            
docked'top'
        
}, {
            
xtype'panel',
            
cls'rpc-outerPanelWrapper',
            
items: [{
               
xtype'panel',
               
cls'x-panel-rpc',
               
items: [{
                   
html'<h1>RockPointe Church</h1><i>Home Page...</i>'
               
}]
            }]
        }]
    },
    
initialize: function () {
        
console.log('rpc.view.home.indexView ~ initialize');
        
this.callParent();
    }
}); 

Now the added trick to this is that I'd like it so that every time a view is loaded, it saves the url to the local storage so that the next time someone opens up the app, they are returned to their last page.


Any help on this would be greatly appreciated.