firefox issue with tabpanel and scrollbar resetting

[nikki_mcmahon]

hi there,

i have an application that uses te tabpanel object for navigating the site... each link in the menu opens a new tab.
when i scroll down on a tab and then click to another tab and back to the scrolled tab, the scroll position is reset to the top of the tab. this is happening only in firefox.

i did a search on older posts and tried the 2 solutions i found, but neither worked.
they were:
1. setting autoScroll and fitToFrame to false in the region and then setting both of those to true in the panel itself.
2. changing hideOnLayout to false.

below is my code. before asking, we have very good reasons for using iframes for our content and it cannot be done any other way with the system we have.

any help would be much appreciated.

thanks in advance,
nikki


Ext.ux.DDTabPanel = Ext.extend(Ext.TabPanel, {

/**
* @method initEvents
*
* Overwritten: declare the tabpanel as a drop target
*/
initEvents: function(){
Ext.ux.DDTabPanel.superclass.initEvents.call(this);
this.dd = new Ext.ux.DDTabPanel.DropTarget(this, {
ddGroup: 'dd-tabpanel-group'
});
},

/**
* @method initTab
* Overwritten: init the drag source after (!) rendering the tab
*
* @param {Object} tab
* @param {Object} index
*/
initTab: function(tab, index){
Ext.ux.DDTabPanel.superclass.initTab.call(this, tab, index);
tab.position = (index + 1) * 2; // 2, 4, 6, 8, ... (2n)
tab.on('render', function(tab){
var id = this.id + '__' + tab.id;
tab.ds = new Ext.dd.DragSource(id, {
ddGroup: 'dd-tabpanel-group',
dropEl: tab,
dropElHeader: Ext.get(id, true)
});

tab.ds.beforeDragEnter = function(target, event, id){
target.tabpanel.activate(this.dropEl);
};

}, this);

// force rendering of the tab
tab.show();
}
});

/**
* @class Ext.ux.DDTabPanel.DropTarget
*
* Implements the drop behavior of the tabpanel
*
* @param {Object} tabpanel
* @param {Object} cfg
*/
Ext.ux.DDTabPanel.DropTarget = function(tabpanel, config){
this.tabpanel = tabpanel;
// target is the header area of the given tabpanel
var target = Ext.select('div.x-tab-panel-header', false, 'div#panel').elements[0];
Ext.ux.DDTabPanel.DropTarget.superclass.constructor.call(this, target, config);
};

Ext.extend(Ext.ux.DDTabPanel.DropTarget, Ext.dd.DropTarget, {
notifyOver: function(dd, e, data){
if (this.tabpanel.items.length < 2) {
return 'x-dd-drop-nodrop';
}
return 'x-dd-drop-ok';
},

notifyDrop: function(dd, e, data){

var tabPanelOffset = this.tabpanel.el.dom.offsetLeft;
var tabs = this.tabpanel.items;

// at this point the items in 'tabs' are sorted by their positions
var eventPosX = e.getXY()[0];
var last = tabs.length;
var newPos = last;
dd.dropEl.position = last * 2 + 1; // default: 'behind the rest'

for (var i = 0; i < last; i++) {
var tab = tabs.itemAt(i);
var dom = tab.ds.dropElHeader.dom;
var tabLeft = tabPanelOffset + dom.offsetLeft;
var tabRight = tabLeft + dom.clientWidth;
var tabMiddle = tabLeft + dom.clientWidth / 2;

if (eventPosX <= tabRight) {
dd.dropEl.position = eventPosX > tabMiddle ? tab.position + 1 : tab.position - 1;
newPos = eventPosX > tabMiddle ? i + 1 : i;
break;
}
}

dd.proxy.hide();
dd.el.dom.parentNode.insertBefore(dd.el.dom, dd.el.dom.parentNode.childNodes[newPos]);

// sort tabs by their actual position
tabs.sort('ASC', function(a, b){
return a.position - b.position;
})
// adjust tab position values
tabs.each(function(tab, index){
tab.position = (index + 1) * 2;
});
}
});
Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Ext.BLANK_IMAGE_URL = domainAndRoot + '/javascript/ext/docs/resources/s.gif';

var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({ // raw
region:'north',
el: 'north',
height:35
}),{
region:'west',
id:'west-panel',
title:'Navigation Menu',
split:true,
width: 250,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 0 0 5',
contentEl:'west',
autoScroll: true
},
// Center Section Tab Control
Ext.centerTabs = new Ext.ux.DDTabPanel({
region:'center',
id:'relayTabPanel',
deferredRender:false,
activeTab:0,
enableTabScroll:true,
autoScroll:false,
items:[{
contentEl:'tabArea',
title: 'Home',
id: 'homeTab',
iconCls: 'homeIcon',
closable:false,
containerScroll:false,
html: '<iframe name="homeIframe" id="homeIframe" width="100%" height="100%" frameborder="0" src="' + domainAndRoot +'/homepage/homepage.cfm"></iframe>'
}]
})
]
});
Ext.QuickTips.init();
var index = 0;
Ext.addTab = function(tabName,tabTitle,href,options){
// set the default options
this.options = {
reuseTab: false,
reuseTabJSFunction: null,
iconClass: 'defaultIcon',
tabTip: tabTitle
}

Object.extend(this.options, options || { }); // this is a function in prototype.js - effectively overwrite this.options with any items passed in
index++;
if (this.options.reuseTab) {
myIndex = ''
} else {
myIndex = index
}

var tabID = 'theTab_'+ tabName+myIndex;
var iframeID = 'tabIFrame_' + tabName+myIndex

//look for existing tab with that name
if (this.options.reuseTab && Ext.centerTabs.getItem(tabID)) {
if (this.options.reuseTabJSFunction) {
for (i=0; i<window.frames.length;i++) {
if (window.frames[i].name == iframeID) {
iframeObject = window.frames[i]
break
}
}
// when reusing the tab, call this bit of javascript
this.options.reuseTabJSFunction (iframeObject )
} else {
window.frames[iframeID].location.href = href;

}
Ext.centerTabs.activate(tabID)

} else {

var iframecall = '<iframe name="'+iframeID+'" id="'+iframeID+ '" src = "' + href + '" ' + '" width="100%" height="100%" frameborder="0"></iframe>';

var newTab = Ext.centerTabs.add({
title: tabTitle,
id: tabID,
border: false,
iconCls: this.options.iconClass,
containerScroll:false,
autoScroll:false,
tabTip: this.options.tabTip,
html: iframecall,
closable:true
}).show();

Ext.QuickTips.init();
}
return tabID;
}
reloadRecentSearches()
});

[dbassett74]

I know this is old, but this is quite funny as I just posted a similar issue, but it is now FireFox that is maintaining the scroll position and other browsers that are not. So it seems like the new version of ExtJS has reversed this problem...