1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    4
    Vote Rating
    0
    mohan.madaddi is on a distinguished road

      0  

    Default IE9 issue with Tab Scroller Menu

    IE9 issue with Tab Scroller Menu


    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

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,001
    Vote Rating
    456
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Thread moved. Plugin forum is for release announcements.

    What version of Ext3 are you using?

    Scott.

  3. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    4
    Vote Rating
    0
    mohan.madaddi is on a distinguished road

      0  

    Default


    Hi Scott,

    I am using Extjs 3.4 version.

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,001
    Vote Rating
    456
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    This seems to work as expected:

    Code:
    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.

  5. #5
    Sencha User
    Join Date
    Sep 2012
    Posts
    4
    Vote Rating
    0
    mohan.madaddi is on a distinguished road

      0  

    Default


    Scott i have implemented in the below way.

    Scroller is not displayed in IE8/IE9

    Code:
    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
        }
    
            ]  });
      
    });

Thread Participants: 1