add extjs 6.0.1 sources

[extjs.git] / extjs / examples / classic / feed-viewer / viewer / FeedPanel.js

/**\r
 * @class FeedViewer.FeedPanel\r
 * @extends Ext.panel.Panel\r
 *\r
 * Shows a list of available feeds. Also has the ability to add/remove and load feeds.\r
 *\r
 * @constructor\r
 * Create a new Feed Panel\r
 * @param {Object} config The config object\r
 */\r
\r
Ext.define('FeedViewer.FeedPanel', {\r
    extend: 'Ext.panel.Panel',\r
\r
    alias: 'widget.feedpanel',\r
\r
    animCollapse: true,\r
    layout: 'fit',\r
    title: 'Feeds',\r
\r
    /**\r
     * @event feedremove Fired when a feed is removed\r
     * @param {FeedPanel} this\r
     * @param {String} title The title of the feed\r
     * @param {String} url The url of the feed\r
     */\r
\r
    /**\r
     * @event feedselect Fired when a feed is selected\r
     * @param {FeedPanel} this\r
     * @param {String} title The title of the feed\r
     * @param {String} url The url of the feed\r
     */\r
\r
    initComponent: function(){\r
        Ext.apply(this, {\r
            items: this.createView(),\r
            dockedItems: this.createToolbar()\r
        });\r
        this.createMenu();\r
        this.callParent(arguments);\r
    },\r
\r
    /**\r
     * Create the DataView to be used for the feed list.\r
     * @private\r
     * @return {Ext.view.View}\r
     */\r
    createView: function(){\r
        this.view = Ext.create('widget.dataview', {\r
            scrollable: true,\r
            store: Ext.create('Ext.data.Store', {\r
                model: 'Feed',\r
                data: this.feeds\r
            }),\r
            selModel: {\r
                mode: 'SINGLE',\r
                listeners: {\r
                    scope: this,\r
                    selectionchange: this.onSelectionChange\r
                }\r
            },\r
            listeners: {\r
                scope: this,\r
                contextmenu: this.onContextMenu,\r
                viewready: this.onViewReady\r
            },\r
            trackOver: true,\r
            cls: 'feed-list',\r
            itemSelector: '.feed-list-item',\r
            overItemCls: 'feed-list-item-hover',\r
            tpl: '<tpl for="."><div class="feed-list-item">{title}</div></tpl>'\r
        });\r
        return this.view;\r
    },\r
\r
    onViewReady: function(){\r
        Ext.suspendLayouts();\r
        this.view.getSelectionModel().select(this.view.store.first());\r
        Ext.resumeLayouts(true);\r
    },\r
\r
    /**\r
     * Creates the toolbar to be used for controlling feeds.\r
     * @private\r
     * @return {Ext.toolbar.Toolbar}\r
     */\r
    createToolbar: function(){\r
        this.createActions();\r
        this.toolbar = Ext.create('widget.toolbar', {\r
            items: [this.addAction, this.removeAction]\r
        });\r
        return this.toolbar;\r
    },\r
\r
    /**\r
     * Create actions to share between toolbar and menu\r
     * @private\r
     */\r
    createActions: function(){\r
        this.addAction = Ext.create('Ext.Action', {\r
            scope: this,\r
            handler: this.onAddFeedClick,\r
            text: 'Add',\r
            iconCls: 'feed-add'\r
        });\r
\r
        this.removeAction = Ext.create('Ext.Action', {\r
            itemId: 'remove',\r
            scope: this,\r
            handler: this.onRemoveFeedClick,\r
            text: 'Remove',\r
            iconCls: 'feed-remove'\r
        });\r
    },\r
\r
    /**\r
     * Create the context menu\r
     * @private\r
     */\r
    createMenu: function(){\r
        this.menu = Ext.create('widget.menu', {\r
            items: [{\r
                scope: this,\r
                handler: this.onLoadClick,\r
                text: 'Load feed',\r
                iconCls: 'feed-load'\r
            }, this.removeAction, '-', this.addAction],\r
            listeners: {\r
                hide: function(c){\r
                    c.activeFeed = null;\r
                }\r
            }\r
        });\r
    },\r
\r
    /**\r
     * Used when view selection changes so we can disable toolbar buttons.\r
     * @private\r
     */\r
    onSelectionChange: function(){\r
        var selected = this.getSelectedItem();\r
        this.toolbar.getComponent('remove').setDisabled(!selected);\r
        if (selected) {\r
            this.loadFeed(selected);\r
        }\r
    },\r
\r
    /**\r
     * React to the load feed menu click.\r
     * @private\r
     */\r
    onLoadClick: function(){\r
        this.loadFeed(this.menu.activeFeed);\r
    },\r
\r
    /**\r
     * Loads a feed.\r
     * @private\r
     * @param {Ext.data.Model} rec The feed\r
     */\r
    loadFeed: function(rec){\r
        if (rec) {\r
            this.fireEvent('feedselect', this, rec.get('title'), rec.get('url'));\r
        }\r
    },\r
\r
    /**\r
     * Gets the currently selected record in the view.\r
     * @private\r
     * @return {Ext.data.Model} Returns the selected model. false if nothing is selected.\r
     */\r
    getSelectedItem: function(){\r
        return this.view.getSelectionModel().getSelection()[0] || false;\r
    },\r
\r
    /**\r
     * Listens for the context menu event on the view\r
     * @private\r
     */\r
    onContextMenu: function(view, index, el, event){\r
        var menu = this.menu;\r
\r
        event.stopEvent();\r
        menu.activeFeed = view.store.getAt(index);\r
        menu.showAt(event.getXY());\r
    },\r
\r
    /**\r
     * React to a feed being removed\r
     * @private\r
     */\r
    onRemoveFeedClick: function() {\r
        var active = this.menu.activeFeed || this.getSelectedItem();\r
\r
\r
        if (active) {\r
            this.view.getSelectionModel().deselectAll();\r
            this.animateNode(this.view.getNode(active), 1, 0, {\r
                scope: this,\r
                afteranimate: function() {\r
                    this.view.store.remove(active);\r
                    \r
                }\r
            });\r
            this.fireEvent('feedremove', this, active.get('title'), active.get('url'));\r
        }\r
    },\r
\r
    /**\r
     * React to a feed attempting to be added\r
     * @private\r
     */\r
    onAddFeedClick: function(){\r
        var win = this.addFeedWindow || (this.addFeedWindow = Ext.create('widget.feedwindow', {\r
            listeners: {\r
                scope: this,\r
                feedvalid: this.onFeedValid\r
            }\r
        }));\r
        win.form.getForm().reset();\r
        win.show();\r
    },\r
\r
    /**\r
     * React to a validation on a feed passing\r
     * @private\r
     * @param {FeedViewer.FeedWindow} win\r
     * @param {String} title The title of the feed\r
     * @param {String} url The url of the feed\r
     */\r
    onFeedValid: function(win, title, url){\r
        var view = this.view,\r
            store = view.store,\r
            rec;\r
\r
        rec = store.add({\r
            url: url,\r
            title: title\r
        })[0];\r
        this.animateNode(view.getNode(rec), 0, 1);\r
    },\r
\r
    /**\r
     * Animate a node in the view when it is added/removed\r
     * @private\r
     * @param {Mixed} el The element to animate\r
     * @param {Number} start The start opacity\r
     * @param {Number} end The end opacity\r
     * @param {Object} listeners (optional) Any listeners\r
     */\r
    animateNode: function(el, start, end, listeners){\r
        Ext.create('Ext.fx.Anim', {\r
            target: Ext.get(el),\r
            duration: 500,\r
            from: {\r
                opacity: start\r
            },\r
            to: {\r
                opacity: end\r
            },\r
            listeners: listeners\r
         });\r
    },\r
\r
    // Inherit docs\r
    onDestroy: function(){\r
        this.callParent(arguments);\r
        this.menu.destroy();\r
    }\r
});\r