How to adjust tab panel scroller menu icon to display all the time on the LEFT side (instead of on the right side) ext js 3

Question

ext js 3.2: How can the css & js be coded so the tab panel scroller menu (currently it is the 2 down carets in top right) will display all the time on the LEFT side ?

See working example in jsfiddle:

http://jsfiddle.net/remy/hNhjR/3/

  <style>

    .x-tab-scroller-right-over {
        background-position: -18px 0;
    }

    .x-tab-tabmenu-right {
        background: transparent url(http://dev.sencha.com/deploy/ext-3.4.0/examples/tabs/tab-scroller-menu.gif) no-repeat 0 0;
        border-bottom: 1px solid #8db2e3;
        width:18px;
        position:absolute;
        right:0;
        top:0;
        z-index:10;
        cursor:pointer;
    }
    .x-tab-tabmenu-over {
        background-position: -18px 0;
    }
    .x-tab-tabmenu-disabled {
        background-position: 0 0;
        opacity:.5;
        -moz-opacity:.5;
        filter:alpha(opacity=50);
        cursor:default;
    }

        </style>


Ext.ux.TabScrollerMenuPmve = Ext.extend(Object, {
     pageSize: 10,
     maxText: 15,
     menuPrefixText: 'Items',
     menuItemIds: 'None',
     constructor: function (config) {
         config = config || {};
         Ext.apply(this, config);
     },
     init: function (tabPanel) {
         Ext.apply(tabPanel, this.parentOverrides);

         tabPanel.TabScrollerMenuPmve = this;
         var thisRef = this;

         tabPanel.on({
             render: {
                 scope: tabPanel,
                 single: true,
                 fn: function () {
                     var newFn = tabPanel.createScrollers.createSequence(thisRef.createPanelsMenu, this);
                     tabPanel.createScrollers = newFn;
                 }
             }
         });
     },
     // private && sequeneced
     createPanelsMenu: function () {
         var h = this.stripWrap.dom.offsetHeight;

         //move the right menu item to the left 18px
         var rtScrBtn = this.header.dom.firstChild;
         Ext.fly(rtScrBtn).applyStyles({
             right: '18px'
         });

         var stripWrap = Ext.get(this.strip.dom.parentNode);
         stripWrap.applyStyles({
             'margin-right': '36px'
         });

         // Add the new righthand menu
         var scrollMenu = this.header.insertFirst({
             cls: 'x-tab-tabmenu-right'
         });
         scrollMenu.setHeight(h);
         scrollMenu.addClassOnOver('x-tab-tabmenu-over');
         scrollMenu.on('click', this.showTabsMenu, this);

         this.scrollLeft.show = this.scrollLeft.show.createSequence(function () {
             scrollMenu.show();
         });

         this.scrollLeft.hide = this.scrollLeft.hide.createSequence(function () {
             scrollMenu.hide();
         });

     }
     /**
  * Returns the current menu prefix text String.;
  * @return {String} this.menuPrefixText The current menu prefix text.
  */
     getmenuItemIds: function () {
         return this.menuItemIds;
     },
     /**
      * Sets the menu item ids array.
      * @param {String} t The menu item ids array text.
      */
     setmenuItemIds: function (t) {
         this.menuItemIds = t;
     },

See working example in jsfiddle:

http://jsfiddle.net/remy/hNhjR/3/

Answer 1

Here what you have to change:

CSS:

.x-tab-scroller-right-over {
    background-position: 0 0;
}

Javascript

var rtScrBtn = this.header.dom.firstChild;
Ext.fly(rtScrBtn).applyStyles({
    right: 0 //'18px',
});

var stripWrap = Ext.get(this.strip.dom.parentNode);
stripWrap.applyStyles({
    'margin-right': '18px',
    'margin-left': '36px'
});

// Add the new righthand menu
var scrollMenu = this.header.insertFirst({
    cls: 'x-tab-tabmenu-right'
});
scrollMenu.setHeight(h);

scrollMenu.addClassOnOver('x-tab-tabmenu-over');
scrollMenu.on('click', this.showTabsMenu, this);

this.scrollLeft.applyStyles({
    'left': '18px'
});

and the updated jsfiddle.