examples/grouptabs/grouptabs.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 Ext.Loader.setConfig({enabled: true});
  16
  17 Ext.Loader.setPath('Ext.ux', '../ux/');
  18
  19 Ext.require([
  20     'Ext.Viewport',
  21     'Ext.tip.QuickTipManager',
  22     'Ext.tab.Panel',
  23     'Ext.ux.GroupTabPanel',
  24     'Ext.grid.*'
  25 ]);
  26
  27 Ext.onReady(function() {
  28         Ext.tip.QuickTipManager.init();
  29
  30     // create some portlet tools using built in Ext tool ids
  31     var tools = [{
  32         type:'gear',
  33         handler: function(){
  34             Ext.Msg.alert('Message', 'The Settings tool was clicked.');
  35         }
  36     },{
  37         type:'close',
  38         handler: function(e, target, panel){
  39             panel.ownerCt.remove(panel, true);
  40         }
  41     }];
  42
  43     Ext.create('Ext.Viewport', {
  44         layout:'fit',
  45         items:[{
  46             xtype: 'grouptabpanel',
  47                 activeGroup: 0,
  48                 items: [{
  49                         mainItem: 1,
  50                         items: [{
  51                                 title: 'Tickets',
  52                     iconCls: 'x-icon-tickets',
  53                     tabTip: 'Tickets tabtip',
  54                     //border: false,
  55                     xtype: 'gridportlet',
  56                     height: null
  57                         },
  58                 {
  59                     xtype: 'portalpanel',
  60                     title: 'Dashboard',
  61                     tabTip: 'Dashboard tabtip',
  62                     border: false,
  63                     items: [{
  64                         flex: 1,
  65                         items: [{
  66                             title: 'Portlet 1',
  67                             html: '<div class="portlet-content">'+Ext.example.bogusMarkup+'</div>'
  68                         },{
  69
  70                             title: 'Stock Portlet',
  71                             items: {
  72                                 xtype: 'chartportlet'
  73                             }
  74                         },{
  75                             title: 'Portlet 2',
  76                             html: '<div class="portlet-content">'+Ext.example.bogusMarkup+'</div>'
  77                         }]
  78                     }]
  79                 }, {
  80                                 title: 'Subscriptions',
  81                     iconCls: 'x-icon-subscriptions',
  82                     tabTip: 'Subscriptions tabtip',
  83                     style: 'padding: 10px;',
  84                     border: false,
  85                                         layout: 'fit',
  86                                 items: [{
  87                                                 xtype: 'tabpanel',
  88                                                 activeTab: 1,
  89                                                 items: [{
  90                                                         title: 'Nested Tabs',
  91                                                         html: Ext.example.shortBogusMarkup
  92                                                 }]
  93                                         }]
  94                         }, {
  95                                 title: 'Users',
  96                     iconCls: 'x-icon-users',
  97                     tabTip: 'Users tabtip',
  98                     style: 'padding: 10px;',
  99                                 html: Ext.example.shortBogusMarkup
 100                         }]
 101             }, {
 102                 expanded: true,
 103                 items: [{
 104                     title: 'Configuration',
 105                     iconCls: 'x-icon-configuration',
 106                     tabTip: 'Configuration tabtip',
 107                     style: 'padding: 10px;',
 108                     html: Ext.example.shortBogusMarkup
 109                 }, {
 110                     title: 'Email Templates',
 111                     iconCls: 'x-icon-templates',
 112                     tabTip: 'Templates tabtip',
 113                     style: 'padding: 10px;',
 114                     border: false,
 115                     items:{
 116                             xtype: 'form', // since we are not using the default 'panel' xtype, we must specify it
 117                             id: 'form-panel',
 118                             labelWidth: 75,
 119                             title: 'Form Layout',
 120                             bodyStyle: 'padding:15px',
 121                             labelPad: 20,
 122                             defaults: {
 123                                 width: 230,
 124                                 labelSeparator: '',
 125                                 msgTarget: 'side'
 126                             },
 127                             defaultType: 'textfield',
 128                             items: [{
 129                                     fieldLabel: 'First Name',
 130                                     name: 'first',
 131                                     allowBlank:false
 132                                 },{
 133                                     fieldLabel: 'Last Name',
 134                                     name: 'last'
 135                                 },{
 136                                     fieldLabel: 'Company',
 137                                     name: 'company'
 138                                 },{
 139                                     fieldLabel: 'Email',
 140                                     name: 'email',
 141                                     vtype:'email'
 142                                 }
 143                             ],
 144                             buttons: [{text: 'Save'},{text: 'Cancel'}]
 145                         }
 146                 }]
 147             }]
 148                 }]
 149     });
 150 });
 151