examples/portal/portal.js

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