IE9 issue with Tab Scroller Menu

[mohan.madaddi]

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]

Thread moved. Plugin forum is for release announcements.

What version of Ext3 are you using?

Scott.

[mohan.madaddi]

Hi Scott,

I am using Extjs 3.4 version.

[scottmartin]

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]

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
    }

        ]  });
  
});