Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / docs / source / grouptabs.html
1 <html>\r
2 <head>\r
3   <title>The source code</title>\r
4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
6 </head>\r
7 <body  onload="prettyPrint();">\r
8     <pre class="prettyprint lang-js">Ext.onReady(function() {\r
9         Ext.QuickTips.init();\r
10     \r
11     // create some portlet tools using built in Ext tool ids\r
12     var tools = [{\r
13         id:'gear',\r
14         handler: function(){\r
15             Ext.Msg.alert('Message', 'The Settings tool was clicked.');\r
16         }\r
17     },{\r
18         id:'close',\r
19         handler: function(e, target, panel){\r
20             panel.ownerCt.remove(panel, true);\r
21         }\r
22     }];\r
23 \r
24     var viewport = new Ext.Viewport({\r
25         layout:'fit',\r
26         items:[{\r
27             xtype: 'grouptabpanel',\r
28                 tabWidth: 130,\r
29                 activeGroup: 0,\r
30                 items: [{\r
31                         mainItem: 1,\r
32                         items: [{\r
33                                 title: 'Tickets',\r
34                     layout: 'fit',\r
35                     iconCls: 'x-icon-tickets',\r
36                     tabTip: 'Tickets tabtip',\r
37                     style: 'padding: 10px;',\r
38                                 items: [new SampleGrid([0,1,2,3,4])]\r
39                         }, \r
40                 {\r
41                     xtype: 'portal',\r
42                     title: 'Dashboard',\r
43                     tabTip: 'Dashboard tabtip',\r
44                     items:[{\r
45                         columnWidth:.33,\r
46                         style:'padding:10px 0 10px 10px',\r
47                         items:[{\r
48                             title: 'Grid in a Portlet',\r
49                             layout:'fit',\r
50                             tools: tools,\r
51                             items: new SampleGrid([0, 2, 3])\r
52                         },{\r
53                             title: 'Another Panel 1',\r
54                             tools: tools,\r
55                             html: Ext.example.shortBogusMarkup\r
56                         }]\r
57                     },{\r
58                         columnWidth:.33,\r
59                         style:'padding:10px 0 10px 10px',\r
60                         items:[{\r
61                             title: 'Panel 2',\r
62                             tools: tools,\r
63                             html: Ext.example.shortBogusMarkup\r
64                         },{\r
65                             title: 'Another Panel 2',\r
66                             tools: tools,\r
67                             html: Ext.example.shortBogusMarkup\r
68                         }]\r
69                     },{\r
70                         columnWidth:.33,\r
71                         style:'padding:10px',\r
72                         items:[{\r
73                             title: 'Panel 3',\r
74                             tools: tools,\r
75                             html: Ext.example.shortBogusMarkup\r
76                         },{\r
77                             title: 'Another Panel 3',\r
78                             tools: tools,\r
79                             html: Ext.example.shortBogusMarkup\r
80                         }]\r
81                     }]                    \r
82                 }, {\r
83                                 title: 'Subscriptions',\r
84                     iconCls: 'x-icon-subscriptions',\r
85                     tabTip: 'Subscriptions tabtip',\r
86                     style: 'padding: 10px;',\r
87                                         layout: 'fit',\r
88                                 items: [{\r
89                                                 xtype: 'tabpanel',\r
90                                                 activeTab: 1,\r
91                                                 items: [{\r
92                                                         title: 'Nested Tabs',\r
93                                                         html: Ext.example.shortBogusMarkup\r
94                                                 }]      \r
95                                         }]      \r
96                         }, {\r
97                                 title: 'Users',\r
98                     iconCls: 'x-icon-users',\r
99                     tabTip: 'Users tabtip',\r
100                     style: 'padding: 10px;',\r
101                                 html: Ext.example.shortBogusMarkup                      \r
102                         }]\r
103             }, {\r
104                 expanded: true,\r
105                 items: [{\r
106                     title: 'Configuration',\r
107                     iconCls: 'x-icon-configuration',\r
108                     tabTip: 'Configuration tabtip',\r
109                     style: 'padding: 10px;',\r
110                     html: Ext.example.shortBogusMarkup \r
111                 }, {\r
112                     title: 'Email Templates',\r
113                     iconCls: 'x-icon-templates',\r
114                     tabTip: 'Templates tabtip',\r
115                     style: 'padding: 10px;',\r
116                     html: Ext.example.shortBogusMarkup\r
117                 }]\r
118             }]\r
119                 }]\r
120     });\r
121 });\r
122 </pre>    \r
123 </body>\r
124 </html>