docs/source/portal.html

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