

var panel1 = {
    //id: 'col-2',
    items: [
       // {
       // title: DetectCardStatus,
       // closable: false,
       // height: 250,
       // items: [
       //{
       //    region: 'center',
       //    xtype: "component",
       //    border: false,
       //    autoEl: {
       //        tag: "iframe",
       //        src: "/Apps/CardSystem/CardLog.aspx?forPortlet=Y"
       //    }
       //}
       // ],
       // listeners: {
       //     'close': Ext.bind(this.onPortletClose, this)
       // }
       // },
       {
           title: DeviceOnlineCheck,
           closable: false,
           height: 250,
           items: [
                {
                    region: 'center',
                    xtype: "component",
                    border: false,
                    id: 'iframe1',
                    autoEl: {
                        tag: "iframe",
                        src: "/Apps/DeviceSystem/DeviceStatus.aspx?forPortlet=Y"
                    }
                }
           ],
           listeners: {
               'close': Ext.bind(this.onPortletClose, this)
           }
       },
    {
        //id: 'portlet-4',
        title: AlarmEvent,
        closable: false,
        height: 250,
        items: [
             {
                 region: 'center',
                 xtype: "component",
                 border: false,
                 autoEl: {
                     tag: "iframe",
                     src: "/Apps/AlarmSystem/Log/Main.aspx?forPortlet=Y"
                 }
             }
        ],
        listeners: {
            'close': Ext.bind(this.onPortletClose, this)
        }
    }]
};

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: [panel1],
                    listeners: {
                        'beforedragover': function () {
                            var iframes = Ext.query('iframe');

                            Ext.Array.each(iframes, function (item) {
                                Ext.get(item).hide();
                            });

                        },
                        'drop': function () {

                            var iframes = Ext.query('iframe');

                            Ext.Array.each(iframes, function (item) {
                                Ext.get(item).setVisible(true);
                            });
                        },
                        'render': function () {

                            setTimeout(function () {
                                var iframes = Ext.query('iframe');

                                var cnt = 1;
                                Ext.Array.each(iframes, function (item) {

                                        setTimeout(function () {
                                            try {
                                                Ext.getDom(Ext.get(item).id).contentWindow.loadData();
                                            } catch (e) {

                                            }
                                            
                                        }, 100 * cnt);


                                    cnt++;
                                });
                            }, 500);

                        }
                    }
                }]
            }]
        });
        this.callParent(arguments);
    },

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