/ext-4.1.0_b3/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
 13Ext.define('Ext.app.Portal', {
 14
 15    extend: 'Ext.container.Viewport',
 16    //requires: [ 'Ext.diag.layout.ContextItem', 'Ext.diag.layout.Context' ],
 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('Loading...');
 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:{
 63                        type: 'accordion',
 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});