Results 1 to 7 of 7

Thread: Ext.History example

  1. #1

    Default Ext.History example

    Hi, I am new in sencha. I would like to implement the Ext.History component for managing browser back/forward navigation within a single page. I help with this http://examples.sencha.com/extjs/5.0.1/examples/history/history.html , but there is example with tabpanel, i have panel in my main app.
    in my main controller
    Code:
     onItemChange: function(tabPanel, tab) {    	var tokenDelimiter = ':';
            var tabs = [],
                ownerCt = tabPanel.ownerCt, 
                oldToken, newToken;
            tabs.push(tab.id);
            tabs.push(tabPanel.id);
    
    
            while (ownerCt && ownerCt.is('panel')) {
                tabs.push(ownerCt.id);
                ownerCt = ownerCt.ownerCt;
            }
            
            newToken = tabs.reverse().join(tokenDelimiter);
            
            oldToken = Ext.History.getToken();
           
            if (oldToken === null || oldToken.search(newToken) === -1) {
                Ext.History.add(newToken);
            }
       },
        
        // Handle this change event in order to restore the UI to the appropriate history state
       onAfterRender: function() {
            Ext.History.on('change', function(token) {
            	console.log(token);
                var parts; 
                var length;
                var i;
                var tokenDelimiter = ':';
                
                if (token) {
                    parts = token.split(tokenDelimiter);
                    length = parts.length;
                    
                    // setActiveTab in all nested tabs
    //here i have problems in developer tools in console: cardLayout.setActiveItem is not a function
                    for (i = 0; i < length - 1; i++) {
                    	var cardLayout = Ext.getCmp(parts[i]).layout;
                    	var newTab = Ext.getCmp(parts[i + 1]);
                    	cardLayout.setActiveItem(newTab); ????
                    }
                }
            });
            
            // This is the initial default state.  Necessary if you navigate starting from the
            // page without any existing history token params and go back to the start state.
            var cardLayout1 = Ext.getCmp('card-central').layout;
    	    var activeItem1 = cardLayout1.getActiveItem();
    	    var cardLayout2 = Ext.getCmp('card-central').layout;
    	    var activeItem2 = cardLayout2.getActiveItem();
    
    
            
            this.onItemChange(activeItem1, activeItem2);
        },
    And in my main i add
    Ext.require([ 'Ext.util.History',
    'Ext.tab.Panel'
    ]);
    and
    Ext.History.init();

    Should i do something more? Thank you for help!

  2. #2

    Join Date
    Feb 2011
    Location
    Chisinau, Moldova
    Posts
    316
    Answers
    64

    Default

    You don't have to use the Ext.util.History class directly. Read more about routing here: https://docs.sencha.com/extjs/5.0.1/...re/router.html.

  3. #3

    Default

    Thank you for the answer. I would like to go back with browser button. So I think that is the best choice Ext.util.History, because with routing I can just go to specific hash (or tab) and browser dont remember hash. Maybe I am wrong? Thank you!

  4. #4

    Join Date
    Feb 2011
    Location
    Chisinau, Moldova
    Posts
    316
    Answers
    64

    Default

    Here are a some excerpts from the link above I've provided that will answer you questions:

    This hash provides a way for an application to control the history stack of the browser without reloading the current page. As the hash changes, the browser adds that whole URI to the history stack, which then allows you to utilize the browser's forward / back buttons to traverse URIs including the hashes that may have changed.
    The Router class is a new addition to Ext JS 5 that was built to make hash change interpretation very simple in an MVC application. We have always had Ext.util.History, which you could use to react to the hash changes. However, this Ext.util.History offers a much more manual process and a proper Router class was needed.
    Also, check out this example of routing: http://examples.sencha.com/extjs/6.5...ry-router.html

  5. #5

    Default

    Thank you.
    So I will write all my code:
    In main app, I have a layout card
    Code:
    {			id : 'card-central',
    			region : 'center',
    			layout : 'card',
    			defaults : {
    				collapsible : false,
    				autoScroll: true
    			},
    			items : [ {
    				id : 'tab-posts',
    				xtype: 'postpanel'
    			}, {
    				id: 'tab-institutions',
    				items: [{
    					xtype: 'institutionpanel'
    				}]
    			}, {
    				id : 'tab-institution-form',
    				items: [{
    					xtype : 'institutionform'
    				}]
    			},
    in main controller i have itemclick function which change my card- central layout

    Code:
    itemclick : function(view, record, item, index, evt, eOpts) {    	    var cardLayout = Ext.getCmp('card-central').layout;
        	    var activeItem = cardLayout.getActiveItem();
        	    
              	switch (record.data.id) {
    				case 'wall' || 'posts': {
    					cardLayout.setActiveItem('tab-posts');	
    		          	break;
    				}
    				case 'institutions': {
    					cardLayout.setActiveItem('tab-institutions');	
    		          	break;
    				}
    				case 'studyprogrammes': {
    					cardLayout.setActiveItem('tab-studyprogrammes');	
    		          	break;
    				}
    				case 'users': {
    					cardLayout.setActiveItem('tab-users');	
    		          	break;
    				}
    				case 'courses': {
    					cardLayout.setActiveItem('tab-courses');	
    		          	break;
    				}
    so if i put in controller also this it does not change nothing
    Code:
        config : {        control : {
                '#card-central' : {
                    itemchange : 'onItemChange'
                },
                '#tab6'      : {
                    itemchange : 'onChildItemChange'
                }
            },
            refs    : {
                tabPanel : '#card-central'
            },
            routes  : {
                'card-central:id:subid' : {
                    action     : 'showItem',
                    before     : 'beforeShowItem',
                    conditions : {
                        //take control of the :id & :subid parameters, make them optional but delimited by colon
                        ':id'    : '(?:(?::){1}([%a-zA-Z0-9\-\_\s,]+))?',
                        ':subid' : '(?:(?::){1}([%a-zA-Z0-9\-\_\s,]+))?'
                    }
                }
            }
        },
    
    
        onItemChange : function(tabPanel, newItem) {
            var id    = newItem.getId(),
                child = newItem.child('tabpanel'),
                subid = '',
                hash  = 'card-central:' + id;
            console.log('0202020202020202');
            if (child) {
                newItem = child.getActiveTab();
                subid   = ':' + newItem.getId();
    
    
                hash += subid;
            }
    
    
            this.redirectTo(hash);
        },
    
    
        onChildItemChange : function(tabPanel, newItem) {
            var parentTab = tabPanel.up(),
                parentId  = parentTab.getId(),
                hash      = 'card-central:' + parentId + ':' + newItem.getId();
    
    
            this.redirectTo(hash);
        },
    
    
        beforeShowItem : function(id, subid, action) {
            var tabPanel = this.getTabPanel(),
                child;
            console.log('0202020202020202');
            
            if (!id) {
                //no id was specified, use 0 index to resolve child
                id = 0;
            }
    
    
            child = tabPanel.getComponent(id);
    
    
            if (child) {
                //tab found, resume the action
                action.resume();
            } else {
                Ext.Msg.alert('Tab Not Found', 'Tab with id or index "<b>' + id + '</b>" was not found!');
    
    
                //child not found, stop action
                action.stop();
            }
        },
    
    
        showItem : function(id, subid) {
            var tabPanel = this.getTabPanel(),
                child, childTabPanel;
    
    
            if (!id) {
                //no id was specified, use 0 index to resolve child
                id = 0;
            }
    
    
            child = tabPanel.getComponent(id);
    
    
            childTabPanel = child.child('tabpanel');
    
    
            tabPanel.setActiveTab(child);
    
    
            if (childTabPanel) {
                if (!subid) {
                    subid = 0;
                }
    
    
                childTabPanel.setActiveTab(subid);
            }
        },
    What should I do?

  6. #6

    Default

    I done that hash works, and itemclick is working. But beforeShowItem does not now the id (is undefined). I got alert Tab with id or index "<b>' + id + '</b>" was not found!, with correct id. Can you please help me?

    beforeShowItem : function(id, subid, action) {
    console.log(id);
    console.log(subid);
    console.log(action);

    var cardLayout = Ext.getCmp('card-central').layout;
    var tabPanel = cardLayout.getActiveItem();
    var child;
    console.log(tabPanel);
    if (!id) {
    //no id was specified, use 0 index to resolve child
    id = 0;
    }


    child = tabPanel.getComponent(id);
    console.log(child);
    if (child) {
    //tab found, resume the action
    action.resume();
    } else {
    //console.log(child);

    Ext.Msg.alert('Tab Not Found', 'Tab with id or index "<b>' + id + '</b>" was not found!');
    //child not found, stop action
    action.stop();
    }
    },




  7. #7

    Join Date
    Feb 2011
    Location
    Chisinau, Moldova
    Posts
    316
    Answers
    64

    Default

    The "beforeShowItem" should check if the item that needs to be activated exists. So I am not sure why you are getting the active card item. You should get the card item with the id of id, then if it exists, and if there is a subid, you should check for it's child.

  8. #8

    Default

    Thank you. I done!
    beforeShowItem : function(id, subid, action) {
    var cardLayout = Ext.getCmp('card-central').layout;
    var tabPanel = cardLayout.getActiveItem();
    var child;
    if (!id) {
    //no id was specified, use 0 index to resolve child
    id = 0;
    }
    child = tabPanel.getComponent(id);
    switch (id) {
    case 'wall' || 'posts': {
    cardLayout.setActiveItem('tab-posts');
    break;
    }
    case 'institutions': {
    cardLayout.setActiveItem('tab-institutions');
    break;
    }
    case 'studyprogrammes': {
    cardLayout.setActiveItem('tab-studyprogrammes');
    break;
    }
    case 'users': {
    cardLayout.setActiveItem('tab-users');
    break;
    }....

Similar Threads

  1. history.back() skipping history items
    By avivais in forum Sencha Touch 2.x: Bugs
    Replies: 5
    Last Post: 29 Aug 2013, 4:22 PM
  2. [OPEN] [FREQ] Enable browser history to support history based navigation
    By jarrednicholls in forum Desktop Packager
    Replies: 0
    Last Post: 15 Feb 2013, 11:52 AM
  3. How to remove History token from Ext.History.
    By Vamsi KP in forum Ext: Q&A
    Replies: 4
    Last Post: 19 Mar 2012, 10:04 PM
  4. Replies: 0
    Last Post: 11 Feb 2009, 9:57 PM
  5. Ext.History: 'change' event fired on Ext.History.add
    By S1-Gezi in forum Community Discussion
    Replies: 5
    Last Post: 18 Sep 2008, 8:10 AM

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
  •