Upgrade to ExtJS 4.0.0 - Released 04/26/2011

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

diff --git a/examples/grouptabs/grouptabs.js b/examples/grouptabs/grouptabs.js
index 32d4b37..2757427 100644 (file)
--- a/examples/grouptabs/grouptabs.js
+++ b/examples/grouptabs/grouptabs.js
@@ -1,88 +1,73 @@
-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
+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.QuickTips.init();
+       Ext.tip.QuickTipManager.init();
     
     // create some portlet tools using built in Ext tool ids
     var tools = [{
-        id:'gear',
+        type:'gear',
         handler: function(){
             Ext.Msg.alert('Message', 'The Settings tool was clicked.');
         }
     },{
-        id:'close',
+        type:'close',
         handler: function(e, target, panel){
             panel.ownerCt.remove(panel, true);
         }
     }];
 
-    var viewport = new Ext.Viewport({
+    Ext.create('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])]
+                    //border: false,
+                    xtype: 'gridportlet',
+                    height: null
                        }, 
                 {
-                    xtype: 'portal',
+                    xtype: 'portalpanel',
                     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])
+                    border: false,
+                    items: [{
+                        flex: 1,
+                        items: [{
+                            title: 'Portlet 1',
+                            html: '<div class="portlet-content">'+Ext.example.bogusMarkup+'</div>'
                         },{
-                            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: 'Stock Portlet',
+                            items: {
+                                xtype: 'chartportlet'
+                            }
                         },{
-                            title: 'Another Panel 3',
-                            tools: tools,
-                            html: Ext.example.shortBogusMarkup
+                            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',
@@ -112,7 +97,38 @@ Ext.onReady(function() {
                     iconCls: 'x-icon-templates',
                     tabTip: 'Templates tabtip',
                     style: 'padding: 10px;',
-                    html: Ext.example.shortBogusMarkup
+                    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'}]
+                        }
                 }]
             }]
                }]