PDA

View Full Version : IE9 issue with Tab Scroller Menu



mohan.madaddi
27 Sep 2012, 12:38 AM
Hi Team,


I have multiple tabs in my panel, when i resize the IE8/9 window, Tab scroller is not getting applied, the same is working in IE7 and Mozilla FireFox. Added the code in the below way.

var scrollerMenu = new Ext.ux.TabScrollerMenu({
maxText : 15,
pageSize :5
});

,plugins:[scrollerMenu]

Appreciate your response on providing solution to this.

Thanks,
Mohan Reddy M

scottmartin
1 Oct 2012, 5:22 AM
Thread moved. Plugin forum is for release announcements.

What version of Ext3 are you using?

Scott.

mohan.madaddi
1 Oct 2012, 6:17 AM
Hi Scott,

I am using Extjs 3.4 version.

scottmartin
5 Oct 2012, 10:28 PM
This seems to work as expected:



Ext.onReady(function() {

var scrollerMenu = new Ext.ux.TabScrollerMenu({
maxText: 15,
pageSize: 5
});

var tabpanel = new Ext.TabPanel({
activeTab: 0,
enableTabScroll: true,

items: [{
xtype: 'panel',
title: 'Tab 1'
}, {
xtype: 'panel',
title: 'Tab 2'
}, {
xtype: 'panel',
title: 'Tab 3'
}, {
xtype: 'panel',
title: 'Tab 4'
}, {
xtype: 'panel',
title: 'Tab 5'
}],

plugins: [scrollerMenu]

});

var win = new Ext.Window({
layout: 'fit',
width: 400,
height: 200,
items: [ tabpanel ]
});

win.show();

});


Scott.

mohan.madaddi
6 Oct 2012, 4:19 AM
Scott i have implemented in the below way.

Scroller is not displayed in IE8/IE9


Ext.onReady(function(){
Ext.QuickTips.init();
var scrollerMenu = new Ext.ux.TabScrollerMenu({
maxText: 15,
pageSize: 5
});

var tabpanel = new Ext.TabPanel({
activeTab: 0,
enableTabScroll: true,

items: [{
xtype: 'panel',
title: 'Tab Panel Test1'
}, {
xtype: 'panel',
title: 'Tab Panel Test 2'
}, {
xtype: 'panel',
title: 'Tab Panel Test 3'
}, {
xtype: 'panel',
title: 'Tab Panel Test 4'
}, {
xtype: 'panel',
title: 'Tab Panel Test 5'
}, {
xtype: 'panel',
title: 'Tab Panel Test 6'
}, {
xtype: 'panel',
title: 'Tab Panel Test 7'
}],

plugins: [scrollerMenu]

});

var viewport = new Ext.Viewport({
layout: 'border',
items: [{
region: 'west',
collapsible: true,
title: 'Navigation',
width: 700
},{
height: 90,
region: 'north',
itemId:'htmlItemId',
xtype:'displayfield',
style: 'padding:7px;border-style:none;',
html: 'display info about single or multiple parts here'
},
{
region: 'center'
,items: tabpanel
}

] });

});