examples/grouptabs/grouptabs.js

   1 Ext.Loader.setConfig({enabled: true});
   2
   3 Ext.Loader.setPath('Ext.ux', '../ux/');
   4
   5 Ext.require([
   6     'Ext.Viewport',
   7     'Ext.tip.QuickTipManager',
   8     'Ext.tab.Panel',
   9     'Ext.ux.GroupTabPanel',
  10     'Ext.grid.*'
  11 ]);
  12
  13 Ext.onReady(function() {
  14         Ext.tip.QuickTipManager.init();
  15
  16     // create some portlet tools using built in Ext tool ids
  17     var tools = [{
  18         type:'gear',
  19         handler: function(){
  20             Ext.Msg.alert('Message', 'The Settings tool was clicked.');
  21         }
  22     },{
  23         type:'close',
  24         handler: function(e, target, panel){
  25             panel.ownerCt.remove(panel, true);
  26         }
  27     }];
  28
  29     Ext.create('Ext.Viewport', {
  30         layout:'fit',
  31         items:[{
  32             xtype: 'grouptabpanel',
  33                 activeGroup: 0,
  34                 items: [{
  35                         mainItem: 1,
  36                         items: [{
  37                                 title: 'Tickets',
  38                     iconCls: 'x-icon-tickets',
  39                     tabTip: 'Tickets tabtip',
  40                     //border: false,
  41                     xtype: 'gridportlet',
  42                     height: null
  43                         },
  44                 {
  45                     xtype: 'portalpanel',
  46                     title: 'Dashboard',
  47                     tabTip: 'Dashboard tabtip',
  48                     border: false,
  49                     items: [{
  50                         flex: 1,
  51                         items: [{
  52                             title: 'Portlet 1',
  53                             html: '<div class="portlet-content">'+Ext.example.bogusMarkup+'</div>'
  54                         },{
  55
  56                             title: 'Stock Portlet',
  57                             items: {
  58                                 xtype: 'chartportlet'
  59                             }
  60                         },{
  61                             title: 'Portlet 2',
  62                             html: '<div class="portlet-content">'+Ext.example.bogusMarkup+'</div>'
  63                         }]
  64                     }]
  65                 }, {
  66                                 title: 'Subscriptions',
  67                     iconCls: 'x-icon-subscriptions',
  68                     tabTip: 'Subscriptions tabtip',
  69                     style: 'padding: 10px;',
  70                     border: false,
  71                                         layout: 'fit',
  72                                 items: [{
  73                                                 xtype: 'tabpanel',
  74                                                 activeTab: 1,
  75                                                 items: [{
  76                                                         title: 'Nested Tabs',
  77                                                         html: Ext.example.shortBogusMarkup
  78                                                 }]
  79                                         }]
  80                         }, {
  81                                 title: 'Users',
  82                     iconCls: 'x-icon-users',
  83                     tabTip: 'Users tabtip',
  84                     style: 'padding: 10px;',
  85                                 html: Ext.example.shortBogusMarkup
  86                         }]
  87             }, {
  88                 expanded: true,
  89                 items: [{
  90                     title: 'Configuration',
  91                     iconCls: 'x-icon-configuration',
  92                     tabTip: 'Configuration tabtip',
  93                     style: 'padding: 10px;',
  94                     html: Ext.example.shortBogusMarkup
  95                 }, {
  96                     title: 'Email Templates',
  97                     iconCls: 'x-icon-templates',
  98                     tabTip: 'Templates tabtip',
  99                     style: 'padding: 10px;',
 100                     border: false,
 101                     items:{
 102                             xtype: 'form', // since we are not using the default 'panel' xtype, we must specify it
 103                             id: 'form-panel',
 104                             labelWidth: 75,
 105                             title: 'Form Layout',
 106                             bodyStyle: 'padding:15px',
 107                             labelPad: 20,
 108                             defaults: {
 109                                 width: 230,
 110                                 labelSeparator: '',
 111                                 msgTarget: 'side'
 112                             },
 113                             defaultType: 'textfield',
 114                             items: [{
 115                                     fieldLabel: 'First Name',
 116                                     name: 'first',
 117                                     allowBlank:false
 118                                 },{
 119                                     fieldLabel: 'Last Name',
 120                                     name: 'last'
 121                                 },{
 122                                     fieldLabel: 'Company',
 123                                     name: 'company'
 124                                 },{
 125                                     fieldLabel: 'Email',
 126                                     name: 'email',
 127                                     vtype:'email'
 128                                 }
 129                             ],
 130                             buttons: [{text: 'Save'},{text: 'Cancel'}]
 131                         }
 132                 }]
 133             }]
 134                 }]
 135     });
 136 });