如何調整選項卡面板滾動器菜單圖標以顯示在左側（而不是在右側）的所有時間分機js 3

Question

分機js 3.2：如何對css & js進行編碼，使標籤面板滾動器菜單（目前它是右下角的兩個下降符號）將始終顯示在左側？

參見工作示例的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; 
    }, 

見的jsfiddle工作示例：

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

Answer 1

在這裏，你必須改變什麼：

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' 
}); 

和更新jsfiddle。