examples/tabs/tabs-adv.js

   1 Ext.Loader.setConfig({enabled: true});
   2
   3 Ext.Loader.setPath('Ext.ux', '../ux/');
   4
   5 Ext.require([
   6     'Ext.tab.*',
   7     'Ext.ux.TabCloseMenu'
   8 ]);
   9
  10 Ext.onReady(function() {
  11     var currentItem;
  12     var tabs = Ext.createWidget('tabpanel', {
  13         renderTo: 'tabs',
  14         resizeTabs: true,
  15         enableTabScroll: true,
  16         width: 600,
  17         height: 250,
  18         defaults: {
  19             autoScroll:true,
  20             bodyPadding: 10
  21         },
  22         items: [{
  23             title: 'Tab 1',
  24             iconCls: 'tabs',
  25             html: 'Tab Body<br/><br/>' + Ext.example.bogusMarkup,
  26             closable: true
  27         }],
  28         plugins: Ext.create('Ext.ux.TabCloseMenu', {
  29             extraItemsTail: [
  30                 '-',
  31                 {
  32                     text: 'Closable',
  33                     checked: true,
  34                     hideOnClick: true,
  35                     handler: function (item) {
  36                         currentItem.tab.setClosable(item.checked);
  37                     }
  38                 }
  39             ],
  40             listeners: {
  41                 aftermenu: function () {
  42                     currentItem = null;
  43                 },
  44                 beforemenu: function (menu, item) {
  45                     var menuitem = menu.child('*[text="Closable"]');
  46                     currentItem = item;
  47                     menuitem.setChecked(item.closable);
  48                 }
  49             }
  50         })
  51     });
  52
  53     // tab generation code
  54     var index = 0;
  55     while(index < 3){
  56         addTab(index % 2);
  57     }
  58
  59     function addTab (closable) {
  60         ++index;
  61         tabs.add({
  62             title: 'New Tab ' + index,
  63             iconCls: 'tabs',
  64             html: 'Tab Body ' + index + '<br/><br/>' + Ext.example.bogusMarkup,
  65             closable: !!closable
  66         }).show();
  67     }
  68
  69     Ext.createWidget('button', {
  70         renderTo: 'addButtonCt',
  71         text: 'Add Closable Tab',
  72         handler: function () {
  73             addTab(true);
  74         },
  75         iconCls:'new-tab'
  76     });
  77
  78     Ext.createWidget('button', {
  79         renderTo: 'addButtonCt',
  80         text: 'Add Unclosable Tab',
  81         handler: function () {
  82             addTab(false);
  83         },
  84         iconCls:'new-tab',
  85         style: 'margin-left: 8px;'
  86     });
  87 });