Upgrade to ExtJS 3.0.0 - Released 07/06/2009

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

diff --git a/examples/portal/portal.js b/examples/portal/portal.js
new file mode 100644 (file)
index 0000000..ef30201
--- /dev/null
+++ b/examples/portal/portal.js
@@ -0,0 +1,115 @@
+/*!
+ * 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
+\r
+    // NOTE: This is an example showing simple state management. During development,\r
+    // it is generally best to disable state management as dynamically-generated ids\r
+    // can change across page loads, leading to unpredictable results.  The developer\r
+    // should ensure that stable state ids are set for stateful components in real apps.\r
+    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());\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:'border',\r
+        items:[{\r
+            region:'west',\r
+            id:'west-panel',\r
+            title:'West',\r
+            split:true,\r
+            width: 200,\r
+            minSize: 175,\r
+            maxSize: 400,\r
+            collapsible: true,\r
+            margins:'35 0 5 5',\r
+            cmargins:'35 5 5 5',\r
+            layout:'accordion',\r
+            layoutConfig:{\r
+                animate:true\r
+            },\r
+            items: [{\r
+                html: Ext.example.shortBogusMarkup,\r
+                title:'Navigation',\r
+                autoScroll:true,\r
+                border:false,\r
+                iconCls:'nav'\r
+            },{\r
+                title:'Settings',\r
+                html: Ext.example.shortBogusMarkup,\r
+                border:false,\r
+                autoScroll:true,\r
+                iconCls:'settings'\r
+            }]\r
+        },{\r
+            xtype:'portal',\r
+            region:'center',\r
+            margins:'35 5 5 0',\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
+            /*\r
+             * Uncomment this block to test handling of the drop event. You could use this\r
+             * to save portlet position state for example. The event arg e is the custom \r
+             * event defined in Ext.ux.Portal.DropZone.\r
+             */\r
+//            ,listeners: {\r
+//                'drop': function(e){\r
+//                    Ext.Msg.alert('Portlet Dropped', e.panel.title + '<br />Column: ' + \r
+//                        e.columnIndex + '<br />Position: ' + e.position);\r
+//                }\r
+//            }\r
+        }]\r
+    });\r
+});\r
+\r