- Ext.QuickTips.init();
- // Create our instance of tabScrollerMenu
- var scrollerMenu = new Ext.ux.TabScrollerMenu({
- maxText : 15,
- pageSize : 5
- });
- new Ext.Window({
- height : 200,
- 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,
- border : false,
- plugins : [ scrollerMenu ],
- items : [
- {
- title : 'our first tab'
- }
- ]
- }
- }).show();
-
- // Add a bunch of tabs dynamically
- var tabLimit = 22;
- (function (num) {
- for (var i = 1; i <= tabLimit; i++) {
- var title = 'Tab # ' + i;
- Ext.getCmp('myTPanel').add({
- title : title,
- html : 'Hi, i am tab ' + i,
- tabTip : title,
- closable : true
- });
- }
- }).defer(1000);
-
-});
\ No newline at end of file
+ // enable the tabTip config below
+ Ext.tip.QuickTipManager.init();
+
+ var win = Ext.createWidget('window', {
+ height: 400,
+ width: 600,
+ layout: 'fit',
+ title: 'Exercising scrollable tabs with a TabScroller menu',
+ border: false,
+ items: {
+ xtype: 'tabpanel',
+ activeTab: 0,
+ itemId: 'tabPanel',
+ plugins: [{
+ ptype: 'tabscrollermenu',
+ maxText : 15,
+ pageSize : 5
+ }],
+ items: [{
+ title: 'First tab',
+ html: 'Creating more tabs...'
+ }]
+ }
+ });
+
+ win.show();
+
+ // Add a bunch of tabs dynamically
+ var tabLimit = 12,
+ tabPanel = win.getComponent('tabPanel');
+
+ Ext.defer(function (num) {
+ var i,
+ title,
+ tabs = [];
+ for (i = 1; i <= tabLimit; i++) {
+ title = 'Tab # ' + i;
+ tabs.push({
+ title: title,
+ html: 'Hi, I am tab ' + i,
+ tabTip: title,
+ closable: true
+ });
+ }
+ tabPanel.add(tabs);
+ tabPanel.getComponent(0).body.update('Done!');
+ }, 100);
+});