View Full Version : [CLOSED-517] History (Titles)

2 Feb 2010, 6:05 AM
There seems to be a bug with History and how it updates titles.

Using the History Example:


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

Ext.onReady(function() {

// The only requirement for this to work is that you must have a hidden field and
// an iframe available in the page with ids corresponding to Ext.History.fieldId
// and Ext.History.iframeId. See history.html for an example.

// 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,

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);

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

document.title = myTitle;

// 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.

});So as you can see I made two slight modifications.
var myTitle = Ext.getCmp(tabId).title;
document.title = myTitle;

Basically I want the title tag to match the tab they are on. In the history example you can't tell because they use the same title for every tab. This makes it much harder to go back/forward. This title is also supposed to be used in the back/forward arrows. This works great in the Heading blue bar, but not the back/forward arrows.

1) Click on tab 2
2) Click on tab 3
3) Click on Tab 4
4) Your back arrow menu would now look something like this:
- Tab 4 (bold because that is what you're on)
- Tab 3
- Tab 2
5) Jump down to the 'tab 2' (don't hit back 2 times, select it from the 'drop-down').
6) Tab 2 is correctly selected and you can see it in the Title tag on top of your page.
7) However if you look at your back/forward arrow menus again it shows 'tab 4' as being selected with your arrow menu now showing:
-Tab 4
-Tab 3
-Tab 4 (this is bold because it thinks its what you're on)

The title reads tab 2, the tab selected is tab 2. But the 'title' showing in your arrow menu is 'tab 4'. Making it impossible to keep track now because as you click back and forth its acting as it should, but the titles in the arrows are misleading to what you're actually on.

I believe this is a bug. Any help is appreciated.

Jamie Avins
4 Mar 2010, 3:20 PM
This is not a framework issue, but how you are trying dealing with the browser's history. Perhaps someone on the help forums has a way to work with the title in relation to the browser's history dropdown list.