PDA

View Full Version : [STALE-772] ext.history bug inside IE when using viewport?



ykoehler
23 Mar 2010, 8:57 AM
http://www.extjs.com/deploy/dev/examples/history/history.html#tab1:subtab1

I took this sample and put the tab panel inside a viewport object with a layout 'border' and set the tab as 'center'. After doing this, the Ext.History stop working inside IE when using forward/back button.

This is my history.js


/*!
* Ext JS Library 3.1.1
* Copyright(c) 2006-2010 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/

Ext.onReady(function() {
//initialize History management
Ext.History.init();

// Needed if you want to handle history for multiple components in the same page.
// Should be something that won't be in component ids.
var tokenDelimiter = ':';

var tp = new Ext.TabPanel({
/*renderTo: Ext.getBody(),*/
id: 'main-tabs',
height: 300,
width: 600,
activeTab: 0,
region: 'center',

items: [{
xtype: 'tabpanel',
title: 'Tab 1',
id: 'tab1',
activeTab: 0,
tabPosition: 'bottom',

items: [{
title: 'Sub-tab 1',
id: 'subtab1'
},{
title: 'Sub-tab 2',
id: 'subtab2'
},{
title: 'Sub-tab 3',
id: 'subtab3'
}],

listeners: {
'tabchange': function(tabPanel, tab){
Ext.History.add(tabPanel.id + tokenDelimiter + tab.id);
}
}
},{
title: 'Tab 2',
id: 'tab2'
},{
title: 'Tab 3',
id: 'tab3'
},{
title: 'Tab 4',
id: 'tab4'
},{
title: 'Tab 5',
id: 'tab5'
}],

listeners: {
'tabchange': function(tabPanel, tab){
// Ignore tab1 since it is a separate tab panel and we're managing history for it also.
// We'll use its handler instead in that case so we don't get duplicate nav events for sub tabs.
if(tab.id != 'tab1'){
Ext.History.add(tabPanel.id + tokenDelimiter + tab.id);
}
}
}
});

new Ext.Viewport({
layout : 'border',
items : [
tp
]
});

// Handle this change event in order to restore the UI to the appropriate history state
Ext.History.on('change', function(token){
if(token){
var parts = token.split(tokenDelimiter);
var tabPanel = Ext.getCmp(parts[0]);
var tabId = parts[1];

tabPanel.show();
tabPanel.setActiveTab(tabId);
}else{
// 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.
tp.setActiveTab(0);
tp.getItem(0).setActiveTab(0);
}
});

});Is it possible that this issue is due to use of "frame" or "iframe" when doing border and that top.location.hash no more points on the correct frame?

Note that it just works less often, sometimes it does, sometimes the back will send the user toward the page before the ajax application even if the hash changed many times.

Using IE7

--
Yannick Koehler

evant
5 Apr 2010, 8:38 AM
I wasn't able to reproduce this. I copied your example in and ran it against 3.2 in IE7, the back button behaved as expected.

Can you provide more information?

mrusinak
20 Aug 2010, 7:07 AM
Hello, I ran into the same issue (on IE8) in my application, and looking through the bug forum this example also reproduces it. Full code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../thirdparty/dist/extjs/resources/css/ext-all.css" />

<script type="text/javascript" src="../thirdparty/dist/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../thirdparty/dist/extjs/ext-all-debug.js"></script>

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = './images/s.gif';

Ext.onReady(function() {
Ext.getBody().createChild({
tag: 'form',
action: '#',
cls: 'x-hidden',
id: 'history-form',
children: [
{
tag: 'div',
children: [
{
tag: 'input',
id: Ext.History.fieldId,
type: 'hidden'
},
{
tag: 'iframe',
id: Ext.History.iframeId
}
]
}
]
});

//initialize History management
Ext.History.init();

// Needed if you want to handle history for multiple components in the same page.
// Should be something that won't be in component ids.
var tokenDelimiter = ':';

var tp = new Ext.TabPanel({
id: 'main-tabs',
height: 300,
width: 600,
activeTab: 0,
region: 'center',
items: [
{
xtype: 'tabpanel',
title: 'Tab 1',
id: 'tab1',
activeTab: 0,
tabPosition: 'bottom',
items: [
{
title: 'Sub-tab 1',
id: 'subtab1'
},
{
title: 'Sub-tab 2',
id: 'subtab2'
},
{
title: 'Sub-tab 3',
id: 'subtab3'
}
],

listeners: {
'tabchange': function(tabPanel, tab){
Ext.History.add(tabPanel.id + tokenDelimiter + tab.id);
}
}
},
{
title: 'Tab 2',
id: 'tab2'
},
{
title: 'Tab 3',
id: 'tab3'
},
{
title: 'Tab 4',
id: 'tab4'
},
{
title: 'Tab 5',
id: 'tab5'
}
],

listeners: {
'tabchange': function(tabPanel, tab){
// Ignore tab1 since it is a separate tab panel and we're managing history for it also.
// We'll use its handler instead in that case so we don't get duplicate nav events for sub tabs.
if(tab.id != 'tab1'){
Ext.History.add(tabPanel.id + tokenDelimiter + tab.id);
}
}
}
});

new Ext.Viewport({
layout : 'border',
items : [ tp ]
});

// Handle this change event in order to restore the UI to the appropriate history state
Ext.History.on('change', function(token){
if(token){
var parts = token.split(tokenDelimiter);
var tabPanel = Ext.getCmp(parts[0]);
var tabId = parts[1];

tabPanel.show();
tabPanel.setActiveTab(tabId);
}else{
// 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.
tp.setActiveTab(0);
tp.getItem(0).setActiveTab(0);
}
});
});
</script>
</head>
<body>
</body>
</html>

Open this up in IE8 (and probably 7), and click on each of the top tabs in turn - 1, 2, 3, 4, and 5. Now, click back twice or more. In Firefox, you keep going back all the way to tab1. In IE, you just alternate between the current tab and the last tab (so following the example, tabs 4 and 5).