examples/grouptabs/grouptabs.js

   1 /*!
   2  * Ext JS Library 3.2.1
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.onReady(function() {
   8         Ext.QuickTips.init();
   9
  10     // create some portlet tools using built in Ext tool ids
  11     var tools = [{
  12         id:'gear',
  13         handler: function(){
  14             Ext.Msg.alert('Message', 'The Settings tool was clicked.');
  15         }
  16     },{
  17         id:'close',
  18         handler: function(e, target, panel){
  19             panel.ownerCt.remove(panel, true);
  20         }
  21     }];
  22
  23     var viewport = new Ext.Viewport({
  24         layout:'fit',
  25         items:[{
  26             xtype: 'grouptabpanel',
  27                 tabWidth: 130,
  28                 activeGroup: 0,
  29                 items: [{
  30                         mainItem: 1,
  31                         items: [{
  32                                 title: 'Tickets',
  33                     layout: 'fit',
  34                     iconCls: 'x-icon-tickets',
  35                     tabTip: 'Tickets tabtip',
  36                     style: 'padding: 10px;',
  37                                 items: [new SampleGrid([0,1,2,3,4])]
  38                         },
  39                 {
  40                     xtype: 'portal',
  41                     title: 'Dashboard',
  42                     tabTip: 'Dashboard tabtip',
  43                     items:[{
  44                         columnWidth:.33,
  45                         style:'padding:10px 0 10px 10px',
  46                         items:[{
  47                             title: 'Grid in a Portlet',
  48                             layout:'fit',
  49                             tools: tools,
  50                             items: new SampleGrid([0, 2, 3])
  51                         },{
  52                             title: 'Another Panel 1',
  53                             tools: tools,
  54                             html: Ext.example.shortBogusMarkup
  55                         }]
  56                     },{
  57                         columnWidth:.33,
  58                         style:'padding:10px 0 10px 10px',
  59                         items:[{
  60                             title: 'Panel 2',
  61                             tools: tools,
  62                             html: Ext.example.shortBogusMarkup
  63                         },{
  64                             title: 'Another Panel 2',
  65                             tools: tools,
  66                             html: Ext.example.shortBogusMarkup
  67                         }]
  68                     },{
  69                         columnWidth:.33,
  70                         style:'padding:10px',
  71                         items:[{
  72                             title: 'Panel 3',
  73                             tools: tools,
  74                             html: Ext.example.shortBogusMarkup
  75                         },{
  76                             title: 'Another Panel 3',
  77                             tools: tools,
  78                             html: Ext.example.shortBogusMarkup
  79                         }]
  80                     }]
  81                 }, {
  82                                 title: 'Subscriptions',
  83                     iconCls: 'x-icon-subscriptions',
  84                     tabTip: 'Subscriptions tabtip',
  85                     style: 'padding: 10px;',
  86                                         layout: 'fit',
  87                                 items: [{
  88                                                 xtype: 'tabpanel',
  89                                                 activeTab: 1,
  90                                                 items: [{
  91                                                         title: 'Nested Tabs',
  92                                                         html: Ext.example.shortBogusMarkup
  93                                                 }]
  94                                         }]
  95                         }, {
  96                                 title: 'Users',
  97                     iconCls: 'x-icon-users',
  98                     tabTip: 'Users tabtip',
  99                     style: 'padding: 10px;',
 100                                 html: Ext.example.shortBogusMarkup
 101                         }]
 102             }, {
 103                 expanded: true,
 104                 items: [{
 105                     title: 'Configuration',
 106                     iconCls: 'x-icon-configuration',
 107                     tabTip: 'Configuration tabtip',
 108                     style: 'padding: 10px;',
 109                     html: Ext.example.shortBogusMarkup
 110                 }, {
 111                     title: 'Email Templates',
 112                     iconCls: 'x-icon-templates',
 113                     tabTip: 'Templates tabtip',
 114                     style: 'padding: 10px;',
 115                     html: Ext.example.shortBogusMarkup
 116                 }]
 117             }]
 118                 }]
 119     });
 120 });