examples/portal/portal.js

   1 /*!
   2  * Ext JS Library 3.1.1
   3  * Copyright(c) 2006-2010 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.onReady(function(){\r
   8 \r
   9     // NOTE: This is an example showing simple state management. During development,\r
  10     // it is generally best to disable state management as dynamically-generated ids\r
  11     // can change across page loads, leading to unpredictable results.  The developer\r
  12     // should ensure that stable state ids are set for stateful components in real apps.\r
  13     Ext.state.Manager.setProvider(new Ext.state.CookieProvider());\r
  14 \r
  15     // create some portlet tools using built in Ext tool ids\r
  16     var tools = [{\r
  17         id:'gear',\r
  18         handler: function(){\r
  19             Ext.Msg.alert('Message', 'The Settings tool was clicked.');\r
  20         }\r
  21     },{\r
  22         id:'close',\r
  23         handler: function(e, target, panel){\r
  24             panel.ownerCt.remove(panel, true);\r
  25         }\r
  26     }];\r
  27 \r
  28     var viewport = new Ext.Viewport({\r
  29         layout:'border',\r
  30         items:[{\r
  31             region:'west',\r
  32             id:'west-panel',\r
  33             title:'West',\r
  34             split:true,\r
  35             width: 200,\r
  36             minSize: 175,\r
  37             maxSize: 400,\r
  38             collapsible: true,\r
  39             margins:'35 0 5 5',\r
  40             cmargins:'35 5 5 5',\r
  41             layout:'accordion',\r
  42             layoutConfig:{\r
  43                 animate:true\r
  44             },\r
  45             items: [{\r
  46                 html: Ext.example.shortBogusMarkup,\r
  47                 title:'Navigation',\r
  48                 autoScroll:true,\r
  49                 border:false,\r
  50                 iconCls:'nav'\r
  51             },{\r
  52                 title:'Settings',\r
  53                 html: Ext.example.shortBogusMarkup,\r
  54                 border:false,\r
  55                 autoScroll:true,\r
  56                 iconCls:'settings'\r
  57             }]\r
  58         },{\r
  59             xtype:'portal',\r
  60             region:'center',\r
  61             margins:'35 5 5 0',\r
  62             items:[{\r
  63                 columnWidth:.33,\r
  64                 style:'padding:10px 0 10px 10px',\r
  65                 items:[{\r
  66                     title: 'Grid in a Portlet',\r
  67                     layout:'fit',\r
  68                     tools: tools,\r
  69                     items: new SampleGrid([0, 2, 3])\r
  70                 },{\r
  71                     title: 'Another Panel 1',\r
  72                     tools: tools,\r
  73                     html: Ext.example.shortBogusMarkup\r
  74                 }]\r
  75             },{\r
  76                 columnWidth:.33,\r
  77                 style:'padding:10px 0 10px 10px',\r
  78                 items:[{\r
  79                     title: 'Panel 2',\r
  80                     tools: tools,\r
  81                     html: Ext.example.shortBogusMarkup\r
  82                 },{\r
  83                     title: 'Another Panel 2',\r
  84                     tools: tools,\r
  85                     html: Ext.example.shortBogusMarkup\r
  86                 }]\r
  87             },{\r
  88                 columnWidth:.33,\r
  89                 style:'padding:10px',\r
  90                 items:[{\r
  91                     title: 'Panel 3',\r
  92                     tools: tools,\r
  93                     html: Ext.example.shortBogusMarkup\r
  94                 },{\r
  95                     title: 'Another Panel 3',\r
  96                     tools: tools,\r
  97                     html: Ext.example.shortBogusMarkup\r
  98                 }]\r
  99             }]\r
 100             \r
 101             /*\r
 102              * Uncomment this block to test handling of the drop event. You could use this\r
 103              * to save portlet position state for example. The event arg e is the custom \r
 104              * event defined in Ext.ux.Portal.DropZone.\r
 105              */\r
 106 //            ,listeners: {\r
 107 //                'drop': function(e){\r
 108 //                    Ext.Msg.alert('Portlet Dropped', e.panel.title + '<br />Column: ' + \r
 109 //                        e.columnIndex + '<br />Position: ' + e.position);\r
 110 //                }\r
 111 //            }\r
 112         }]\r
 113     });\r
 114 });\r
 115 \r