examples/grouptabs/grouptabs.js

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