examples/portal/portal.js

   1 /**
   2  * @class Ext.app.Portal
   3  * @extends Object
   4  * A sample portal layout application class.
   5  */
   6 // TODO: Fill in the content panel -- no AccordionLayout at the moment
   7 // TODO: Fix container drag/scroll support (waiting on Ext.lib.Anim)
   8 // TODO: Fix Ext.Tool scope being set to the panel header
   9 // TODO: Drag/drop does not cause a refresh of scroll overflow when needed
  10 // TODO: Grid portlet throws errors on destroy (grid bug)
  11 // TODO: Z-index issues during drag
  12
  13 Ext.define('Ext.app.Portal', {
  14
  15     extend: 'Ext.container.Viewport',
  16
  17     uses: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'],
  18
  19     getTools: function(){
  20         return [{
  21             xtype: 'tool',
  22             type: 'gear',
  23             handler: function(e, target, panelHeader, tool){
  24                 var portlet = panelHeader.ownerCt;
  25                 portlet.setLoading('Working...');
  26                 Ext.defer(function() {
  27                     portlet.setLoading(false);
  28                 }, 2000);
  29             }
  30         }];
  31     },
  32
  33     initComponent: function(){
  34         var content = '<div class="portlet-content">'+Ext.example.shortBogusMarkup+'</div>';
  35
  36         Ext.apply(this, {
  37             id: 'app-viewport',
  38             layout: {
  39                 type: 'border',
  40                 padding: '0 5 5 5' // pad the layout from the window edges
  41             },
  42             items: [{
  43                 id: 'app-header',
  44                 xtype: 'box',
  45                 region: 'north',
  46                 height: 40,
  47                 html: 'Ext Portal'
  48             },{
  49                 xtype: 'container',
  50                 region: 'center',
  51                 layout: 'border',
  52                 items: [{
  53                     id: 'app-options',
  54                     title: 'Options',
  55                     region: 'west',
  56                     animCollapse: true,
  57                     width: 200,
  58                     minWidth: 150,
  59                     maxWidth: 400,
  60                     split: true,
  61                     collapsible: true,
  62                     layout: 'accordion',
  63                     layoutConfig:{
  64                         animate: true
  65                     },
  66                     items: [{
  67                         html: content,
  68                         title:'Navigation',
  69                         autoScroll: true,
  70                         border: false,
  71                         iconCls: 'nav'
  72                     },{
  73                         title:'Settings',
  74                         html: content,
  75                         border: false,
  76                         autoScroll: true,
  77                         iconCls: 'settings'
  78                     }]
  79                 },{
  80                     id: 'app-portal',
  81                     xtype: 'portalpanel',
  82                     region: 'center',
  83                     items: [{
  84                         id: 'col-1',
  85                         items: [{
  86                             id: 'portlet-1',
  87                             title: 'Grid Portlet',
  88                             tools: this.getTools(),
  89                             items: Ext.create('Ext.app.GridPortlet'),
  90                             listeners: {
  91                                 'close': Ext.bind(this.onPortletClose, this)
  92                             }
  93                         },{
  94                             id: 'portlet-2',
  95                             title: 'Portlet 2',
  96                             tools: this.getTools(),
  97                             html: content,
  98                             listeners: {
  99                                 'close': Ext.bind(this.onPortletClose, this)
 100                             }
 101                         }]
 102                     },{
 103                         id: 'col-2',
 104                         items: [{
 105                             id: 'portlet-3',
 106                             title: 'Portlet 3',
 107                             tools: this.getTools(),
 108                             html: '<div class="portlet-content">'+Ext.example.bogusMarkup+'</div>',
 109                             listeners: {
 110                                 'close': Ext.bind(this.onPortletClose, this)
 111                             }
 112                         }]
 113                     },{
 114                         id: 'col-3',
 115                         items: [{
 116                             id: 'portlet-4',
 117                             title: 'Stock Portlet',
 118                             tools: this.getTools(),
 119                             items: Ext.create('Ext.app.ChartPortlet'),
 120                             listeners: {
 121                                 'close': Ext.bind(this.onPortletClose, this)
 122                             }
 123                         }]
 124                     }]
 125                 }]
 126             }]
 127         });
 128         this.callParent(arguments);
 129     },
 130
 131     onPortletClose: function(portlet) {
 132         this.showMsg('"' + portlet.title + '" was removed');
 133     },
 134
 135     showMsg: function(msg) {
 136         var el = Ext.get('app-msg'),
 137             msgId = Ext.id();
 138
 139         this.msgId = msgId;
 140         el.update(msg).show();
 141
 142         Ext.defer(this.clearMsg, 3000, this, [msgId]);
 143     },
 144
 145     clearMsg: function(msgId) {
 146         if (msgId === this.msgId) {
 147             Ext.get('app-msg').hide();
 148         }
 149     }
 150 });