Upgrade to ExtJS 3.3.0 - Released 10/06/2010
[extjs.git] / examples / portal / portal.js
index 36a30d2..4cfda4f 100644 (file)
 /*!
 /*!
- * Ext JS Library 3.0.3
- * Copyright(c) 2006-2009 Ext JS, LLC
+ * Ext JS Library 3.3.0
+ * Copyright(c) 2006-2010 Ext JS, Inc.
  * licensing@extjs.com
  * http://www.extjs.com/license
  */
  * 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
+Ext.onReady(function(){
+
+    // 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());
+
+    // 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:'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
+            },
+            items: [{
+                html: Ext.example.shortBogusMarkup,
+                title:'Navigation',
+                autoScroll:true,
+                border:false,
+                iconCls:'nav'
+            },{
+                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])
+                },{
+                    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
+                }]
+            }]
+            
+            /*
+             * 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);
+//                }
+//            }
+        }]
+    });
+});
+