Hybrid View

  1. #1
    Sencha User
    Join Date
    May 2011
    Posts
    143
    Answers
    5
    Vote Rating
    0
    rockinthesixstring is on a distinguished road

      0  

    Default Unanswered: How to implement url navigation is ST2

    Unanswered: How to implement url navigation is ST2


    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.

  2. #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

      0  

    Default


    History support isn't fully integrated yet.
    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.

  3. #3
    Sencha User
    Join Date
    Nov 2011
    Location
    Jena
    Posts
    39
    Vote Rating
    0
    dsac is on a distinguished road

      0  

    Default


    any eta or dirty workaround for it?

  4. #4
    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


    Quote Originally Posted by dsac View Post
    any eta or dirty workaround for it?
    You can put together your own... the browser fires an event when the hash is changed (hashchange I believe) and you can check the has when your app starts up.
    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: 2