PDA

View Full Version : How to remove History token from Ext.History.



Vamsi KP
13 Mar 2012, 10:24 PM
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

mitchellsimoens
14 Mar 2012, 7:07 AM
Moved to Ext JS 4 Q&A forum

Vamsi KP
15 Mar 2012, 9:25 PM
Any idea from anyone on this. Pls reply back. Stuck in this issue.

Best Regards
Hari

Vamsi KP
19 Mar 2012, 9:37 PM
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)?"":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.

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

ankitcts
19 Mar 2012, 10:04 PM
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)?"":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.


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