X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6e39d509471fe9b4e2660e0d1631b350d0c66f40..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/examples/grouptabs/grouptabs.js

diff --git a/examples/grouptabs/grouptabs.js b/examples/grouptabs/grouptabs.js
index d3a228fe..27574275 100644
--- a/examples/grouptabs/grouptabs.js
+++ b/examples/grouptabs/grouptabs.js
@@ -1,120 +1,136 @@
-/*!
- * Ext JS Library 3.1.0
- * Copyright(c) 2006-2009 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-Ext.onReady(function() {
-	Ext.QuickTips.init();
-    
-    // create some portlet tools using built in Ext tool ids
-    var tools = [{
-        id:'gear',
-        handler: function(){
-            Ext.Msg.alert('Message', 'The Settings tool was clicked.');
-        }
-    },{
-        id:'close',
-        handler: function(e, target, panel){
-            panel.ownerCt.remove(panel, true);
-        }
-    }];
-
-    var viewport = new Ext.Viewport({
-        layout:'fit',
-        items:[{
-            xtype: 'grouptabpanel',
-    		tabWidth: 130,
-    		activeGroup: 0,
-    		items: [{
-    			mainItem: 1,
-    			items: [{
-    				title: 'Tickets',
-                    layout: 'fit',
-                    iconCls: 'x-icon-tickets',
-                    tabTip: 'Tickets tabtip',
-                    style: 'padding: 10px;',
-    				items: [new SampleGrid([0,1,2,3,4])]
-    			}, 
-                {
-                    xtype: 'portal',
-                    title: 'Dashboard',
-                    tabTip: 'Dashboard tabtip',
-                    items:[{
-                        columnWidth:.33,
-                        style:'padding:10px 0 10px 10px',
-                        items:[{
-                            title: 'Grid in a Portlet',
-                            layout:'fit',
-                            tools: tools,
-                            items: new SampleGrid([0, 2, 3])
-                        },{
-                            title: 'Another Panel 1',
-                            tools: tools,
-                            html: Ext.example.shortBogusMarkup
-                        }]
-                    },{
-                        columnWidth:.33,
-                        style:'padding:10px 0 10px 10px',
-                        items:[{
-                            title: 'Panel 2',
-                            tools: tools,
-                            html: Ext.example.shortBogusMarkup
-                        },{
-                            title: 'Another Panel 2',
-                            tools: tools,
-                            html: Ext.example.shortBogusMarkup
-                        }]
-                    },{
-                        columnWidth:.33,
-                        style:'padding:10px',
-                        items:[{
-                            title: 'Panel 3',
-                            tools: tools,
-                            html: Ext.example.shortBogusMarkup
-                        },{
-                            title: 'Another Panel 3',
-                            tools: tools,
-                            html: Ext.example.shortBogusMarkup
-                        }]
-                    }]                    
-                }, {
-    				title: 'Subscriptions',
-                    iconCls: 'x-icon-subscriptions',
-                    tabTip: 'Subscriptions tabtip',
-                    style: 'padding: 10px;',
-					layout: 'fit',
-    				items: [{
-						xtype: 'tabpanel',
-						activeTab: 1,
-						items: [{
-							title: 'Nested Tabs',
-							html: Ext.example.shortBogusMarkup
-						}]	
-					}]	
-    			}, {
-    				title: 'Users',
-                    iconCls: 'x-icon-users',
-                    tabTip: 'Users tabtip',
-                    style: 'padding: 10px;',
-    				html: Ext.example.shortBogusMarkup			
-    			}]
-            }, {
-                expanded: true,
-                items: [{
-                    title: 'Configuration',
-                    iconCls: 'x-icon-configuration',
-                    tabTip: 'Configuration tabtip',
-                    style: 'padding: 10px;',
-                    html: Ext.example.shortBogusMarkup 
-                }, {
-                    title: 'Email Templates',
-                    iconCls: 'x-icon-templates',
-                    tabTip: 'Templates tabtip',
-                    style: 'padding: 10px;',
-                    html: Ext.example.shortBogusMarkup
-                }]
-            }]
-		}]
-    });
-});
+Ext.Loader.setConfig({enabled: true});
+
+Ext.Loader.setPath('Ext.ux', '../ux/');
+
+Ext.require([
+    'Ext.Viewport',
+    'Ext.tip.QuickTipManager',
+    'Ext.tab.Panel',
+    'Ext.ux.GroupTabPanel',
+    'Ext.grid.*'
+]);
+
+Ext.onReady(function() {
+	Ext.tip.QuickTipManager.init();
+    
+    // create some portlet tools using built in Ext tool ids
+    var tools = [{
+        type:'gear',
+        handler: function(){
+            Ext.Msg.alert('Message', 'The Settings tool was clicked.');
+        }
+    },{
+        type:'close',
+        handler: function(e, target, panel){
+            panel.ownerCt.remove(panel, true);
+        }
+    }];
+
+    Ext.create('Ext.Viewport', {
+        layout:'fit',
+        items:[{
+            xtype: 'grouptabpanel',
+    		activeGroup: 0,
+    		items: [{
+    			mainItem: 1,
+    			items: [{
+    				title: 'Tickets',
+                    iconCls: 'x-icon-tickets',
+                    tabTip: 'Tickets tabtip',
+                    //border: false,
+                    xtype: 'gridportlet',
+                    height: null
+    			}, 
+                {
+                    xtype: 'portalpanel',
+                    title: 'Dashboard',
+                    tabTip: 'Dashboard tabtip',
+                    border: false,
+                    items: [{
+                        flex: 1,
+                        items: [{
+                            title: 'Portlet 1',
+                            html: '<div class="portlet-content">'+Ext.example.bogusMarkup+'</div>'
+                        },{
+                            
+                            title: 'Stock Portlet',
+                            items: {
+                                xtype: 'chartportlet'
+                            }
+                        },{
+                            title: 'Portlet 2',
+                            html: '<div class="portlet-content">'+Ext.example.bogusMarkup+'</div>'
+                        }]
+                    }]                  
+                }, {
+    				title: 'Subscriptions',
+                    iconCls: 'x-icon-subscriptions',
+                    tabTip: 'Subscriptions tabtip',
+                    style: 'padding: 10px;',
+                    border: false,
+					layout: 'fit',
+    				items: [{
+						xtype: 'tabpanel',
+						activeTab: 1,
+						items: [{
+							title: 'Nested Tabs',
+							html: Ext.example.shortBogusMarkup
+						}]	
+					}]	
+    			}, {
+    				title: 'Users',
+                    iconCls: 'x-icon-users',
+                    tabTip: 'Users tabtip',
+                    style: 'padding: 10px;',
+    				html: Ext.example.shortBogusMarkup			
+    			}]
+            }, {
+                expanded: true,
+                items: [{
+                    title: 'Configuration',
+                    iconCls: 'x-icon-configuration',
+                    tabTip: 'Configuration tabtip',
+                    style: 'padding: 10px;',
+                    html: Ext.example.shortBogusMarkup 
+                }, {
+                    title: 'Email Templates',
+                    iconCls: 'x-icon-templates',
+                    tabTip: 'Templates tabtip',
+                    style: 'padding: 10px;',
+                    border: false,
+                    items:{
+                            xtype: 'form', // since we are not using the default 'panel' xtype, we must specify it
+                            id: 'form-panel',
+                            labelWidth: 75,
+                            title: 'Form Layout',
+                            bodyStyle: 'padding:15px',
+                            labelPad: 20,
+                            defaults: {
+                                width: 230,
+                                labelSeparator: '',
+                                msgTarget: 'side'
+                            },
+                            defaultType: 'textfield',
+                            items: [{
+                                    fieldLabel: 'First Name',
+                                    name: 'first',
+                                    allowBlank:false
+                                },{
+                                    fieldLabel: 'Last Name',
+                                    name: 'last'
+                                },{
+                                    fieldLabel: 'Company',
+                                    name: 'company'
+                                },{
+                                    fieldLabel: 'Email',
+                                    name: 'email',
+                                    vtype:'email'
+                                }
+                            ],
+                            buttons: [{text: 'Save'},{text: 'Cancel'}]
+                        }
+                }]
+            }]
+		}]
+    });
+});