/**
 * @class Ext.app.Portal
 * @extends Object
 * A sample portal layout application class.
 */

Ext.define('Ext.app.Portal', {

    extend: 'Ext.container.Viewport',
    requires: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'],

    getTools: function () {
        return [{
            xtype: 'tool',
            type: 'gear',
            handler: function (e, target, header, tool) {
                var portlet = header.ownerCt;
                portlet.setLoading('Loading...');
                Ext.defer(function () {
                    portlet.setLoading(false);
                }, 2000);
            }
        }];
    },

    initComponent: function () {
        var content = '<div class="portlet-content"></div>';

        Ext.apply(this, {
            id: 'app-viewport',
            layout: {
                type: 'border'
            },
            items: [{
                xtype: 'container',
                region: 'center',
                layout: 'border',
                items: [{
                    id: 'app-portal',
                    xtype: 'portalpanel',
                    region: 'center',
                    items: [{
                        id: 'col-1',
                        items: [{
                            id: 'portlet-1',
                            title: '訊息佈告(for住戶)',
                            tools: this.getTools(),
                            items: Ext.create('Ext.app.GridPortlet'),
                            listeners: {
                                'close': Ext.bind(this.onPortletClose, this)
                            }
                        }, {
                            id: 'portlet-2',
                            title: 'Portlet 2',
                            tools: this.getTools(),
                            html: content,
                            listeners: {
                                'close': Ext.bind(this.onPortletClose, this)
                            }
                        }]
                    }, {
                        id: 'col-2',
                        items: [{
                            id: 'portlet-3',
                            title: '設備連線狀況(for管理員)',
                            tools: this.getTools(),
                            html: '<div class="portlet-content"></div>',
                            listeners: {
                                'close': Ext.bind(this.onPortletClose, this)
                            }
                        }]
                    }, {
                        id: 'col-3',
                        items: [{
                            id: 'portlet-4',
                            title: '信件收發',
                            tools: this.getTools(),
                            items: Ext.create('Ext.app.ChartPortlet'),
                            listeners: {
                                'close': Ext.bind(this.onPortletClose, this)
                            }
                        }]
                    }]
                }]
            }]
        });
        this.callParent(arguments);
    },

    onPortletClose: function (portlet) {
        //Close
    }
});
