Results 1 to 5 of 5

Thread: How to remove History token from Ext.History.

  1. #1
    Sencha User
    Join Date
    Aug 2010
    Location
    Bangalore
    Posts
    14
    Answers
    1
    Vote Rating
    0
      0  

    Default Answered: How to remove History token from Ext.History.

    Hi,

    I'm using Ext.History in ExtJS 4 can you any one tell me how to remove History token.

    In my application. I'm closing the Tab. After closing tab I want to remove Tab token entry from Ext.History.

    Can any one help me out in this?

    Best Regards
    Vamsi

  2. Hi,

    I think I got the solution for this.

    1) Define the below globally

    var strHiddenTabs="";
    var StackOne=[];
    var StackTwo=[];
    var abcString="";
    var blnOnAdd=true;
    var TabDelimiter = '|';


    2) I added the below line beforeclose listener

    strHiddenTabs = (strHiddenTabs=="")?tab.getId():tokenDelimiter+tab.getId();

    This will add closing tab id to strHiddenTabs string variable.

    3) Triggered the function HistoryTabChange on tabchange listener

    4) Add the below code after creating new tab, this is only for Home page

    if(newTab.id==homepageID){
    HistoryTabChange(Ext.getCmp('tabPanel'),newTab);
    }

    In the above code for Home first time calling the function HistoryTabChange. For the remaining tabs Tabchange event will take care of that (when we are creating new tab we are changing the activetab to new tab, so tab change event will take care to calling HistoryTabChange).

    And the below code will remove the reopened tab id from strHiddenTabs string

    if (strHiddenTabs.indexOf(newTab.id)>-1) {
    var tokenDelimiterDBL = tokenDelimiter+tokenDelimiter;
    strHiddenTabs = strHiddenTabs.replace(/newTab.id/g,"");
    strHiddenTabs = strHiddenTabs.replace(/tokenDelimiterDBL/g,tokenDelimiter);
    strHiddenTabs=(strTrim(strHiddenTabs)===tokenDelimiter)?""trHiddenTabs;
    }

    5) And I wrote the below code for Handling closed Tab in HistoryTabChange function. In this StackOne contains the all forward tabs. StackTwo contains previous backward tabs. When user were there in the middle of the history traversing and the user clicked on any tab then the previous traversed needs to be cleared and from that clicked tab needs to added to forward traverse, the below code will take care of that. And the string contains all tabs clicked / opened by user (even user clicks multiple times at different intervals (if user clicks on Home tab, and if he clicks the Home tab again after clicking on different tabs) that will also recoded in this). blnOnAdd used to track is History change event is happening because of History traverse / adding the new entry to History.

    StackOne.push(newToken);
    blnOnAdd = false;
    StackTwo=[];
    StackTwo.length=0;
    abcString="";
    for(var i=0;i<StackOne.length;i++){
    if(i>0){
    if(StackOne[i]!=StackOne[i-1]){
    abcString = abcString + StackOne[i] + TabDelimiter;
    }
    } else {
    abcString = abcString + StackOne[i] + TabDelimiter;
    }
    }

    6) And I wrote the below code for Handling closed Tab in HistoryAfterRender (in Ext.History Change event) function.

    var j, strPos, abcStringDup;
    var arrString;

    if(blnOnAdd){

    arrString = abcString.substr(0,abcString.length-1).split(TabDelimiter);
    var blnbrk=false;

    If Token exist in strHiddenTabs then making blnJump boolean to true. blnJump Variable is used to jump when closed tab found

    if(strHiddenTabs!=""){
    if(strHiddenTabs.indexOf(strTrim(parts[0]))>-1) {
    blnJump=true;
    }
    }

    for(j=0;j<arrString.length;j++){
    if(arrString[j].indexOf(strTrim(token))>-1){

    If element is there in StackOne then it will be forward. Poping the Stackone and pushing that element to StackTwo.

    if(j<=StackOne.length){
    if(StackOne[j]==arrString[j]){
    StackTwo.push(StackOne.pop());
    blnbrk=true;
    if(blnJump) {
    window.history.go(-1);
    }
    }
    }
    If element is not there in StackOne then it will be backward. Poping the Stacktwo and pushing that element to Stackone.

    if(!(blnbrk)){
    StackOne.push(StackTwo.pop());
    blnbrk=true;
    if(blnJump){
    window.history.go(1);
    }
    }
    }
    if(blnbrk){
    break;
    }
    }
    }

    Below code will be used to set active tab

    if(strHiddenTabs!=""){
    if(strHiddenTabs.indexOf(parts[0])==-1) {
    Ext.getCmp("tabPanel").setActiveTab(Ext.getCmp(parts[0]));
    } else {
    // window.history.go(-1);
    }
    } else {
    Ext.getCmp("tabPanel").setActiveTab(Ext.getCmp(parts[0]));
    }
    blnOnAdd = true;

    If any one is having better way for this pls let me know.

    ====
    Best Regards
    Hari

  3. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,381
    Answers
    3997
    Vote Rating
    1536
      0  

    Default

    Moved to Ext JS 4 Q&A forum
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    Aug 2010
    Location
    Bangalore
    Posts
    14
    Answers
    1
    Vote Rating
    0
      0  

    Default

    Any idea from anyone on this. Pls reply back. Stuck in this issue.

    Best Regards
    Hari

  5. #4
    Sencha User
    Join Date
    Aug 2010
    Location
    Bangalore
    Posts
    14
    Answers
    1
    Vote Rating
    0
      0  

    Default Solved

    Hi,

    I think I got the solution for this.

    1) Define the below globally

    var strHiddenTabs="";
    var StackOne=[];
    var StackTwo=[];
    var abcString="";
    var blnOnAdd=true;
    var TabDelimiter = '|';


    2) I added the below line beforeclose listener

    strHiddenTabs = (strHiddenTabs=="")?tab.getId():tokenDelimiter+tab.getId();

    This will add closing tab id to strHiddenTabs string variable.

    3) Triggered the function HistoryTabChange on tabchange listener

    4) Add the below code after creating new tab, this is only for Home page

    if(newTab.id==homepageID){
    HistoryTabChange(Ext.getCmp('tabPanel'),newTab);
    }

    In the above code for Home first time calling the function HistoryTabChange. For the remaining tabs Tabchange event will take care of that (when we are creating new tab we are changing the activetab to new tab, so tab change event will take care to calling HistoryTabChange).

    And the below code will remove the reopened tab id from strHiddenTabs string

    if (strHiddenTabs.indexOf(newTab.id)>-1) {
    var tokenDelimiterDBL = tokenDelimiter+tokenDelimiter;
    strHiddenTabs = strHiddenTabs.replace(/newTab.id/g,"");
    strHiddenTabs = strHiddenTabs.replace(/tokenDelimiterDBL/g,tokenDelimiter);
    strHiddenTabs=(strTrim(strHiddenTabs)===tokenDelimiter)?""trHiddenTabs;
    }

    5) And I wrote the below code for Handling closed Tab in HistoryTabChange function. In this StackOne contains the all forward tabs. StackTwo contains previous backward tabs. When user were there in the middle of the history traversing and the user clicked on any tab then the previous traversed needs to be cleared and from that clicked tab needs to added to forward traverse, the below code will take care of that. And the string contains all tabs clicked / opened by user (even user clicks multiple times at different intervals (if user clicks on Home tab, and if he clicks the Home tab again after clicking on different tabs) that will also recoded in this). blnOnAdd used to track is History change event is happening because of History traverse / adding the new entry to History.

    StackOne.push(newToken);
    blnOnAdd = false;
    StackTwo=[];
    StackTwo.length=0;
    abcString="";
    for(var i=0;i<StackOne.length;i++){
    if(i>0){
    if(StackOne[i]!=StackOne[i-1]){
    abcString = abcString + StackOne[i] + TabDelimiter;
    }
    } else {
    abcString = abcString + StackOne[i] + TabDelimiter;
    }
    }

    6) And I wrote the below code for Handling closed Tab in HistoryAfterRender (in Ext.History Change event) function.

    var j, strPos, abcStringDup;
    var arrString;

    if(blnOnAdd){

    arrString = abcString.substr(0,abcString.length-1).split(TabDelimiter);
    var blnbrk=false;

    If Token exist in strHiddenTabs then making blnJump boolean to true. blnJump Variable is used to jump when closed tab found

    if(strHiddenTabs!=""){
    if(strHiddenTabs.indexOf(strTrim(parts[0]))>-1) {
    blnJump=true;
    }
    }

    for(j=0;j<arrString.length;j++){
    if(arrString[j].indexOf(strTrim(token))>-1){

    If element is there in StackOne then it will be forward. Poping the Stackone and pushing that element to StackTwo.

    if(j<=StackOne.length){
    if(StackOne[j]==arrString[j]){
    StackTwo.push(StackOne.pop());
    blnbrk=true;
    if(blnJump) {
    window.history.go(-1);
    }
    }
    }
    If element is not there in StackOne then it will be backward. Poping the Stacktwo and pushing that element to Stackone.

    if(!(blnbrk)){
    StackOne.push(StackTwo.pop());
    blnbrk=true;
    if(blnJump){
    window.history.go(1);
    }
    }
    }
    if(blnbrk){
    break;
    }
    }
    }

    Below code will be used to set active tab

    if(strHiddenTabs!=""){
    if(strHiddenTabs.indexOf(parts[0])==-1) {
    Ext.getCmp("tabPanel").setActiveTab(Ext.getCmp(parts[0]));
    } else {
    // window.history.go(-1);
    }
    } else {
    Ext.getCmp("tabPanel").setActiveTab(Ext.getCmp(parts[0]));
    }
    blnOnAdd = true;

    If any one is having better way for this pls let me know.

    ====
    Best Regards
    Hari

  6. #5
    Sencha User ankitcts's Avatar
    Join Date
    Mar 2009
    Location
    Bangalore
    Posts
    4
    Vote Rating
    0
      0  

    Default

    I think I got the solution for this.

    1) Define the below globally
    Code:
    var strHiddenTabs="";
    var StackOne=[];
    var StackTwo=[];
    var abcString="";
    var blnOnAdd=true;
    var TabDelimiter = '|';

    2) I added the below line beforeclose listener
    Code:
        strHiddenTabs = (strHiddenTabs=="")?tab.getId():tokenDelimiter+tab.getId();
    This will add closing tab id to strHiddenTabs string variable.

    3) Triggered the function HistoryTabChange on tabchange listener

    4) Add the below code after creating new tab, this is only for Home page
    Code:
            if(newTab.id==homepageID){
                HistoryTabChange(Ext.getCmp('tabPanel'),newTab);
            }
    In the above code for Home first time calling the function HistoryTabChange. For the remaining tabs Tabchange event will take care of that (when we are creating new tab we are changing the activetab to new tab, so tab change event will take care to calling HistoryTabChange).

    And the below code will remove the reopened tab id from strHiddenTabs string
    Code:
            if (strHiddenTabs.indexOf(newTab.id)>-1) {
                var tokenDelimiterDBL = tokenDelimiter+tokenDelimiter;
                strHiddenTabs = strHiddenTabs.replace(/newTab.id/g,"");
                strHiddenTabs = strHiddenTabs.replace(/tokenDelimiterDBL/g,tokenDelimiter);
                strHiddenTabs=(strTrim(strHiddenTabs)===tokenDelimiter)?"":strHiddenTabs;
            }
    5) And I wrote the below code for Handling closed Tab in HistoryTabChange function. In this StackOne contains the all forward tabs. StackTwo contains previous backward tabs. When user were there in the middle of the history traversing and the user clicked on any tab then the previous traversed needs to be cleared and from that clicked tab needs to added to forward traverse, the below code will take care of that. And the string contains all tabs clicked / opened by user (even user clicks multiple times at different intervals (if user clicks on Home tab, and if he clicks the Home tab again after clicking on different tabs) that will also recoded in this). blnOnAdd used to track is History change event is happening because of History traverse / adding the new entry to History.
    Code:
        StackOne.push(newToken);
                blnOnAdd = false;
                StackTwo=[];
                StackTwo.length=0;
                abcString="";
                for(var i=0;i<StackOne.length;i++){
                    if(i>0){
                        if(StackOne[i]!=StackOne[i-1]){
                            abcString = abcString + StackOne[i] + TabDelimiter;
                        }
                    } else {
                        abcString = abcString + StackOne[i] + TabDelimiter;
                    }
                }
    6) And I wrote the below code for Handling closed Tab in HistoryAfterRender (in Ext.History Change event) function.

    Code:
    var j, strPos, abcStringDup;
                var arrString;
               
                if(blnOnAdd){
                   
                    arrString = abcString.substr(0,abcString.length-1).split(TabDelimiter);
                    var blnbrk=false;
    If Token exist in strHiddenTabs then making blnJump boolean to true. blnJump Variable is used to jump when closed tab found
    Code:
                    if(strHiddenTabs!=""){
                        if(strHiddenTabs.indexOf(strTrim(parts[0]))>-1) {
                            blnJump=true;
                        }
                    }
                                       
                    for(j=0;j<arrString.length;j++){
                        if(arrString[j].indexOf(strTrim(token))>-1){
    If element is there in StackOne then it will be forward. Poping the Stackone and pushing that element to StackTwo.
    Code:
                            if(j<=StackOne.length){
                                if(StackOne[j]==arrString[j]){
                                    StackTwo.push(StackOne.pop());
                                    blnbrk=true;
                                    if(blnJump) {
                                        window.history.go(-1);
                                    }
                                }
                            }
    If element is not there in StackOne then it will be backward. Poping the Stacktwo and pushing that element to Stackone.
    Code:
                           if(!(blnbrk)){
                                StackOne.push(StackTwo.pop());
                                blnbrk=true;
                                if(blnJump){
                                    window.history.go(1);
                                }
                            }
                        }
                        if(blnbrk){
                            break;
                        }
                    }
                }
    Below code will be used to set active tab
    Code:
                if(strHiddenTabs!=""){
                    if(strHiddenTabs.indexOf(parts[0])==-1) {
                        Ext.getCmp("tabPanel").setActiveTab(Ext.getCmp(parts[0]));
                    } else {
    //                    window.history.go(-1);
                    }
                } else {
                    Ext.getCmp("tabPanel").setActiveTab(Ext.getCmp(parts[0]));
                }
                blnOnAdd = true;
    If any one is having better way for this pls let me know.

    ====
    Best Regards
    Hari

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •