Upgrade to ExtJS 3.0.0 - Released 07/06/2009

[extjs.git] / examples / grouptabs / grouptabs.js

diff --git a/examples/grouptabs/grouptabs.js b/examples/grouptabs/grouptabs.js
new file mode 100644 (file)
index 0000000..2ff38ae
--- /dev/null
+++ b/examples/grouptabs/grouptabs.js
@@ -0,0 +1,120 @@
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+Ext.onReady(function() {\r
+       Ext.QuickTips.init();\r
+    \r
+    // create some portlet tools using built in Ext tool ids\r
+    var tools = [{\r
+        id:'gear',\r
+        handler: function(){\r
+            Ext.Msg.alert('Message', 'The Settings tool was clicked.');\r
+        }\r
+    },{\r
+        id:'close',\r
+        handler: function(e, target, panel){\r
+            panel.ownerCt.remove(panel, true);\r
+        }\r
+    }];\r
+\r
+    var viewport = new Ext.Viewport({\r
+        layout:'fit',\r
+        items:[{\r
+            xtype: 'grouptabpanel',\r
+               tabWidth: 130,\r
+               activeGroup: 0,\r
+               items: [{\r
+                       mainItem: 1,\r
+                       items: [{\r
+                               title: 'Tickets',\r
+                    layout: 'fit',\r
+                    iconCls: 'x-icon-tickets',\r
+                    tabTip: 'Tickets tabtip',\r
+                    style: 'padding: 10px;',\r
+                               items: [new SampleGrid([0,1,2,3,4])]\r
+                       }, \r
+                {\r
+                    xtype: 'portal',\r
+                    title: 'Dashboard',\r
+                    tabTip: 'Dashboard tabtip',\r
+                    items:[{\r
+                        columnWidth:.33,\r
+                        style:'padding:10px 0 10px 10px',\r
+                        items:[{\r
+                            title: 'Grid in a Portlet',\r
+                            layout:'fit',\r
+                            tools: tools,\r
+                            items: new SampleGrid([0, 2, 3])\r
+                        },{\r
+                            title: 'Another Panel 1',\r
+                            tools: tools,\r
+                            html: Ext.example.shortBogusMarkup\r
+                        }]\r
+                    },{\r
+                        columnWidth:.33,\r
+                        style:'padding:10px 0 10px 10px',\r
+                        items:[{\r
+                            title: 'Panel 2',\r
+                            tools: tools,\r
+                            html: Ext.example.shortBogusMarkup\r
+                        },{\r
+                            title: 'Another Panel 2',\r
+                            tools: tools,\r
+                            html: Ext.example.shortBogusMarkup\r
+                        }]\r
+                    },{\r
+                        columnWidth:.33,\r
+                        style:'padding:10px',\r
+                        items:[{\r
+                            title: 'Panel 3',\r
+                            tools: tools,\r
+                            html: Ext.example.shortBogusMarkup\r
+                        },{\r
+                            title: 'Another Panel 3',\r
+                            tools: tools,\r
+                            html: Ext.example.shortBogusMarkup\r
+                        }]\r
+                    }]                    \r
+                }, {\r
+                               title: 'Subscriptions',\r
+                    iconCls: 'x-icon-subscriptions',\r
+                    tabTip: 'Subscriptions tabtip',\r
+                    style: 'padding: 10px;',\r
+                                       layout: 'fit',\r
+                               items: [{\r
+                                               xtype: 'tabpanel',\r
+                                               activeTab: 1,\r
+                                               items: [{\r
+                                                       title: 'Nested Tabs',\r
+                                                       html: Ext.example.shortBogusMarkup\r
+                                               }]      \r
+                                       }]      \r
+                       }, {\r
+                               title: 'Users',\r
+                    iconCls: 'x-icon-users',\r
+                    tabTip: 'Users tabtip',\r
+                    style: 'padding: 10px;',\r
+                               html: Ext.example.shortBogusMarkup                      \r
+                       }]\r
+            }, {\r
+                expanded: true,\r
+                items: [{\r
+                    title: 'Configuration',\r
+                    iconCls: 'x-icon-configuration',\r
+                    tabTip: 'Configuration tabtip',\r
+                    style: 'padding: 10px;',\r
+                    html: Ext.example.shortBogusMarkup \r
+                }, {\r
+                    title: 'Email Templates',\r
+                    iconCls: 'x-icon-templates',\r
+                    tabTip: 'Templates tabtip',\r
+                    style: 'padding: 10px;',\r
+                    html: Ext.example.shortBogusMarkup\r
+                }]\r
+            }]\r
+               }]\r
+    });\r
+});\r