Ext.plugins.TDGi.tabScrollerMenu插件的使用

Ext.plugins.TDGi.tabScrollerMenu插件的使用

效果:

调用代码:

Ext.onReady(function() {
 Ext.QuickTips.init();
 var scrollerMenu = new Ext.plugins.TDGi.tabScrollerMenu({
  maxText  : 15,
  pageSize : 5
 });
 new Ext.Window({
  height : 400,
  width  : 400,
  layout : 'fit',
  title  : 'Exercising scrollable tabs with a tabscroller menu',
  items  : {
   xtype           : 'tabpanel',
   activeTab       : 0,
   id              : 'myTPanel',
   enableTabScroll : true,
   resizeTabs      : true,
   minTabWidth     : 75,
   plugins         : [ scrollerMenu ],
   items           : [
    {
     title : 'our first tab'
    }
   ]
  }
 }).show();
 
 // Add a bunch of tabs dynamically
 var tabLimit = 20;
 (function (num) {
  for (var i = 1; i <= tabLimit; i++) {
   var title = 'Long Title Tab # ' + i;
   Ext.getCmp('myTPanel').add({
    title    : title,
    html     : 'Hi, i am tab ' + i,
    tabTip   : title,
    closable : true
   });
  }
 }).defer(1000);

});

 

备注:

附件中是下载的源文件.

要详细了解该插件,可以参考这个网站:http://tdg-i.com/59/how-to-add-a-tab-scroller-menu