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

diff --git a/examples/portal/portal.js b/examples/portal/portal.js
index 0d24acec..ac68c54b 100644
--- a/examples/portal/portal.js
+++ b/examples/portal/portal.js
@@ -1,115 +1,150 @@
-/*!
- * Ext JS Library 3.2.0
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
+/**
+ * @class Ext.app.Portal
+ * @extends Object
+ * A sample portal layout application class.
  */
-Ext.onReady(function(){
+// TODO: Fill in the content panel -- no AccordionLayout at the moment
+// TODO: Fix container drag/scroll support (waiting on Ext.lib.Anim)
+// TODO: Fix Ext.Tool scope being set to the panel header
+// TODO: Drag/drop does not cause a refresh of scroll overflow when needed
+// TODO: Grid portlet throws errors on destroy (grid bug)
+// TODO: Z-index issues during drag
 
-    // NOTE: This is an example showing simple state management. During development,
-    // it is generally best to disable state management as dynamically-generated ids
-    // can change across page loads, leading to unpredictable results.  The developer
-    // should ensure that stable state ids are set for stateful components in real apps.
-    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
+Ext.define('Ext.app.Portal', {
 
-    // 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);
-        }
-    }];
+    extend: 'Ext.container.Viewport',
+
+    uses: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'],
+
+    getTools: function(){
+        return [{
+            xtype: 'tool',
+            type: 'gear',
+            handler: function(e, target, panelHeader, tool){
+                var portlet = panelHeader.ownerCt;
+                portlet.setLoading('Working...');
+                Ext.defer(function() {
+                    portlet.setLoading(false);
+                }, 2000);
+            }
+        }];
+    },
+
+    initComponent: function(){
+        var content = '<div class="portlet-content">'+Ext.example.shortBogusMarkup+'</div>';
 
-    var viewport = new Ext.Viewport({
-        layout:'border',
-        items:[{
-            region:'west',
-            id:'west-panel',
-            title:'West',
-            split:true,
-            width: 200,
-            minSize: 175,
-            maxSize: 400,
-            collapsible: true,
-            margins:'35 0 5 5',
-            cmargins:'35 5 5 5',
-            layout:'accordion',
-            layoutConfig:{
-                animate:true
+        Ext.apply(this, {
+            id: 'app-viewport',
+            layout: {
+                type: 'border',
+                padding: '0 5 5 5' // pad the layout from the window edges
             },
             items: [{
-                html: Ext.example.shortBogusMarkup,
-                title:'Navigation',
-                autoScroll:true,
-                border:false,
-                iconCls:'nav'
+                id: 'app-header',
+                xtype: 'box',
+                region: 'north',
+                height: 40,
+                html: 'Ext Portal'
             },{
-                title:'Settings',
-                html: Ext.example.shortBogusMarkup,
-                border:false,
-                autoScroll:true,
-                iconCls:'settings'
-            }]
-        },{
-            xtype:'portal',
-            region:'center',
-            margins:'35 5 5 0',
-            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])
+                xtype: 'container',
+                region: 'center',
+                layout: 'border',
+                items: [{
+                    id: 'app-options',
+                    title: 'Options',
+                    region: 'west',
+                    animCollapse: true,
+                    width: 200,
+                    minWidth: 150,
+                    maxWidth: 400,
+                    split: true,
+                    collapsible: true,
+                    layout: 'accordion',
+                    layoutConfig:{
+                        animate: true
+                    },
+                    items: [{
+                        html: content,
+                        title:'Navigation',
+                        autoScroll: true,
+                        border: false,
+                        iconCls: 'nav'
+                    },{
+                        title:'Settings',
+                        html: content,
+                        border: false,
+                        autoScroll: true,
+                        iconCls: 'settings'
+                    }]
                 },{
-                    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
+                    id: 'app-portal',
+                    xtype: 'portalpanel',
+                    region: 'center',
+                    items: [{
+                        id: 'col-1',
+                        items: [{
+                            id: 'portlet-1',
+                            title: 'Grid Portlet',
+                            tools: this.getTools(),
+                            items: Ext.create('Ext.app.GridPortlet'),
+                            listeners: {
+                                'close': Ext.bind(this.onPortletClose, this)
+                            }
+                        },{
+                            id: 'portlet-2',
+                            title: 'Portlet 2',
+                            tools: this.getTools(),
+                            html: content,
+                            listeners: {
+                                'close': Ext.bind(this.onPortletClose, this)
+                            }
+                        }]
+                    },{
+                        id: 'col-2',
+                        items: [{
+                            id: 'portlet-3',
+                            title: 'Portlet 3',
+                            tools: this.getTools(),
+                            html: '<div class="portlet-content">'+Ext.example.bogusMarkup+'</div>',
+                            listeners: {
+                                'close': Ext.bind(this.onPortletClose, this)
+                            }
+                        }]
+                    },{
+                        id: 'col-3',
+                        items: [{
+                            id: 'portlet-4',
+                            title: 'Stock Portlet',
+                            tools: this.getTools(),
+                            items: Ext.create('Ext.app.ChartPortlet'),
+                            listeners: {
+                                'close': Ext.bind(this.onPortletClose, this)
+                            }
+                        }]
+                    }]
                 }]
             }]
-            
-            /*
-             * Uncomment this block to test handling of the drop event. You could use this
-             * to save portlet position state for example. The event arg e is the custom 
-             * event defined in Ext.ux.Portal.DropZone.
-             */
-//            ,listeners: {
-//                'drop': function(e){
-//                    Ext.Msg.alert('Portlet Dropped', e.panel.title + '<br />Column: ' + 
-//                        e.columnIndex + '<br />Position: ' + e.position);
-//                }
-//            }
-        }]
-    });
-});
+        });
+        this.callParent(arguments);
+    },
+
+    onPortletClose: function(portlet) {
+        this.showMsg('"' + portlet.title + '" was removed');
+    },
+
+    showMsg: function(msg) {
+        var el = Ext.get('app-msg'),
+            msgId = Ext.id();
 
+        this.msgId = msgId;
+        el.update(msg).show();
+
+        Ext.defer(this.clearMsg, 3000, this, [msgId]);
+    },
+
+    clearMsg: function(msgId) {
+        if (msgId === this.msgId) {
+            Ext.get('app-msg').hide();
+        }
+    }
+});