tab-scroller-menu.js 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. Ext.Loader.setConfig({enabled: true});
  2. Ext.Loader.setPath('Ext.ux', '../ux/');
  3. Ext.require([
  4. 'Ext.tip.QuickTipManager',
  5. 'Ext.window.Window',
  6. 'Ext.tab.Panel',
  7. 'Ext.ux.TabScrollerMenu'
  8. ]);
  9. Ext.onReady(function() {
  10. // enable the tabTip config below
  11. Ext.tip.QuickTipManager.init();
  12. var win = Ext.widget('window', {
  13. height: 400,
  14. width: 600,
  15. layout: 'fit',
  16. title: 'Exercising scrollable tabs with a TabScroller menu',
  17. border: false,
  18. items: {
  19. xtype: 'tabpanel',
  20. activeTab: 0,
  21. itemId: 'tabPanel',
  22. plugins: [{
  23. ptype: 'tabscrollermenu',
  24. maxText : 15,
  25. pageSize : 5
  26. }],
  27. items: [{
  28. title: 'First tab',
  29. html: 'Creating more tabs...'
  30. }]
  31. }
  32. });
  33. win.show();
  34. // Add a bunch of tabs dynamically
  35. var tabLimit = 12,
  36. tabPanel = win.getComponent('tabPanel');
  37. Ext.defer(function (num) {
  38. var i,
  39. title,
  40. tabs = [];
  41. for (i = 1; i <= tabLimit; i++) {
  42. title = 'Tab # ' + i;
  43. tabs.push({
  44. title: title,
  45. html: 'Hi, I am tab ' + i,
  46. tabTip: title,
  47. closable: true
  48. });
  49. }
  50. tabPanel.add(tabs);
  51. tabPanel.getComponent(0).body.update('Done!');
  52. }, 100);
  53. });