examples/portal/sample.js

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