
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: '訊息佈告',
                            closable: false,
                            height:500,
                            //tools: this.getTools(),
                            items: Ext.create('Ext.grid.Panel', {
                                store: Ext.create('Ext.data.ArrayStore', {
                                    sorters: [{
                                        property: 'c3',
                                        direction: 'DESC' // or 'ASC'
                                    }],
                                    fields: [
                                        { name: 'c1' },
                                      { name: 'c2' },
                                         { name: 'c3' }
                                    ],
                                    data: [
                                        ['中秋節暨園遊會活動行程表', '管委會', '2013/09/01 20:10 '],
                                        ['強烈颱風蘇力將襲台，敬請住戶提前做好防颱準備', '總幹事', '2013/09/01 17:20 '],
                                        ['請留意陌生人、車，確保生命財產安全', '管理員', '2013/08/20 11:12 '],
                                        ['透天戶車庫鐵捲門保養維護', '管理員', '2013/08/13 18:44 '],
                                        ['泳池暑期開放時間調整案', '管理員', '2013/09/01 13:54'],
                                        ['102年9月社區公共事務勞務、財務採購招標', '管委會', '2013/09/01 13:33 '],
                                        ['發電機及自動切換開關測試通知', '管理員', '2013/10/20 13:15 '],
                                        ['泳池102年9月份會員證辦理', '管委會', '2013/11/23 13:13 '],
                                        ['社區中元普渡', '管委會', '2013/12/01 13:11 '],
                                        ['A、B案服務中心暫停開放', '管委會', '2013/12/11 13:13 '],
                                        ['社區噴灑消毒除蟲劑', '管委會', '2013/10/01 13:13 '],
                                        ['102年度管理委員會當選公告', '管委會', '2013/09/01 13:13 '],
                                        ['102年度區分所有權人大會第一次會議紀錄', '管委會', '2013/11/03 16:10 '],
                                        ['社區巴士65歲以上住戶搭乘優惠券', '管委會', '2013/05/01 14:50 '],
                                        ['垃圾清運時間異動通知', '管理員', '2013/09/09 12:30 '],
                                        ['裝設門禁管制系統測試施工', '管委會', '2013/07/11 15:00 '],
                                        ['社區消防火警警報測試', '管理員', '2013/11/11 15:20 '],
                                        ['社區e化網站正式啟用案', '總幹事', '2013/10/14 12:00 '],
                                        ['社區泳池鍋爐故障事宜', '管理員', '2013/10/11 14:30 '],
                                        ['路面施工通告', '管理員', '2013/12/11 08:00 '],
                                        ['102年千翔保全駐百年社區客戶滿意度調查案', '管委會', '2013/09/21 14:30 '],
                                        ['社區發電機及自動切換開關測試通知', '管理員', '2013/07/03 13:20 ']
                                    ]
                                }),
                                columns: [
                                    {
                                        text: '訊息',
                                        flex: 1,
                                        dataIndex: 'c1'
                                    },
                                    {
                                        text: '發佈人',
                                        dataIndex: 'c2'
                                    },
                                    {
                                        text: '時間',
                                        width: 120,
                                        dataIndex: 'c3'
                                    }
                                ],
                                viewConfig: {
                                    stripeRows: true
                                }
                            }),
                            listeners: {
                                'close': Ext.bind(this.onPortletClose, this)
                            }
                        }]
                    }, {
                
                        id: 'col-3',
                        items: [{

                            title: '訪客影音留言',
                            closable: false,
                            //tools: this.getTools(),
                            items: Ext.create('Ext.grid.Panel', {
                                store: Ext.create('Ext.data.ArrayStore', {
                                    sorters: [{
                                        property: 'c3',
                                        direction: 'DESC' // or 'ASC'
                                    }],
                                    fields: [
                                        { name: 'c1' },

                                         { name: 'c3' }
                                    ],
                                    data: [
                                        ['<input type=button value="開啟影音留言" />',  '2013/09/01 20:10 '],
                                        ['<input type=button value="開啟影音留言" />', '2013/09/01 17:20 '],
                                        ['<input type=button value="開啟影音留言" />', '2013/08/20 11:12 '],
                                        ['<input type=button value="開啟影音留言" />', '2013/08/13 18:44 '],
                                        ['<input type=button value="開啟影音留言" />', '2013/09/01 13:54']
                                     
                                    ]
                                }),
                                columns: [
                                    
                                    {
                                        text: '留言時間',
                                        flex: 1,
                                        dataIndex: 'c3'
                                    },
                                    {
                                        text: '',
                                        width:110,
                                        dataIndex: 'c1'
                                    }
                                ],
                                viewConfig: {
                                    stripeRows: true
                                }
                            }),
                            listeners: {
                                'close': Ext.bind(this.onPortletClose, this)
                            }
                        },{
                            id: 'portlet-4',
                            title: '待收信件包裹',
                            closable: false,
                            //tools: this.getTools(),
                            items: Ext.create('Ext.grid.Panel', {
                                store: Ext.create('Ext.data.ArrayStore', {
                                    sorters: [{
                                        property: 'c3',
                                        direction: 'DESC' // or 'ASC'
                                    }],
                                    fields: [
                                        { name: 'c1' },

                                         { name: 'c3' }
                                    ],
                                    data: [
                                        ['平信',  '2013/09/01 20:10 '],
                                        ['<font color=red>掛號信</font>',  '2013/09/01 17:20 '],
                                        ['快遞',  '2013/08/20 11:12 '],
                                        ['<font color=red>掛號信</font>', '2013/08/13 18:44 '],
                                        ['<font color=red>掛號信</font>', '2013/09/01 13:54'],
                                        ['平信', '2013/09/01 13:33 '],
                                        ['快遞', '2013/09/01 13:15 '],
                                        ['快遞', '2013/09/01 13:13 '],
                                        ['平信', '2013/09/01 13:11 ']
                                    ]
                                }),
                                columns: [
                                    {
                                        text: '類型',
                                        flex: 1,
                                        dataIndex: 'c1'
                                    },
                                    {
                                        text: '時間',
                                        flex: 1,
                                        dataIndex: 'c3'
                                    }
                                ],
                                viewConfig: {
                                    stripeRows: true
                                }
                            }),
                            listeners: {
                                'close': Ext.bind(this.onPortletClose, this)
                            }
                        }]
                    }],
                    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);
                            });
                        }
                    }
                }]
            }]
        });
        this.callParent(arguments);
    },

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