add extjs 6.0.1 sources

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

/**\r
 * @class FeedViewer.FeedViewer\r
 * @extends Ext.container.Viewport\r
 *\r
 * The main FeedViewer application\r
 * \r
 * @constructor\r
 * Create a new Feed Viewer app\r
 * @param {Object} config The config object\r
 */\r
\r
Ext.define('FeedViewer.App', {\r
    extend: 'Ext.container.Viewport',\r
    \r
    initComponent: function(){\r
        Ext.define('Feed', {\r
            extend: 'Ext.data.Model',\r
            fields: ['title', 'url']\r
        });\r
\r
        Ext.define('FeedItem', {\r
            extend: 'Ext.data.Model',\r
            fields: [{\r
                name: 'title',\r
                convert: function(v) {\r
                    return Ext.htmlEncode(v);\r
                }\r
            }, 'author', 'link', {\r
                name: 'pubDate',\r
                type: 'date'\r
            }, {\r
                // Some feeds return the description as the main content\r
                // Others return description as a summary. Figure this out here\r
                name: 'description',\r
                mapping: function(raw) {\r
                    var DQ = Ext.dom.Query,\r
                        content = DQ.selectNode('content', raw),\r
                        key;\r
\r
                    if (content && DQ.getNodeValue(content)) {\r
                        key = 'description';\r
                    } else {\r
                        key = 'title';\r
                    }\r
                    return DQ.selectValue(key, raw);\r
\r
                }\r
            }, {\r
                name: 'content',\r
                mapping: function(raw) {\r
                    var DQ = Ext.dom.Query,\r
                        content = DQ.selectNode('content', raw);\r
\r
                    if (!content || !DQ.getNodeValue(content)) {\r
                        content = DQ.selectNode('description', raw);\r
                    }\r
                    return DQ.getNodeValue(content, '');\r
                }\r
            }]\r
        });\r
        \r
        Ext.apply(this, {\r
            layout: {\r
                type: 'border',\r
                padding: 5\r
            },\r
            items: [this.createFeedPanel(), this.createFeedInfo()]\r
        });\r
        this.callParent(arguments);\r
    },\r
    \r
    /**\r
     * Create the list of fields to be shown on the left\r
     * @private\r
     * @return {FeedViewer.FeedPanel} feedPanel\r
     */\r
    createFeedPanel: function(){\r
        this.feedPanel = Ext.create('widget.feedpanel', {\r
            region: 'west',\r
            collapsible: true,\r
            width: 225,\r
            //floatable: false,\r
            split: true,\r
            minWidth: 175,\r
            feeds: [{\r
                title: 'Sencha Blog',\r
                url: 'http://feeds.feedburner.com/sencha'\r
            }, {\r
                title: 'Sencha Forums',\r
                url: 'http://sencha.com/forum/external.php?type=RSS2'\r
            }, {\r
                title: 'Ajaxian',\r
                url: 'http://feeds.feedburner.com/ajaxian'\r
            }],\r
            listeners: {\r
                scope: this,\r
                feedselect: this.onFeedSelect\r
            }\r
        });\r
        return this.feedPanel;\r
    },\r
    \r
    /**\r
     * Create the feed info container\r
     * @private\r
     * @return {FeedViewer.FeedInfo} feedInfo\r
     */\r
    createFeedInfo: function(){\r
        this.feedInfo = Ext.create('widget.feedinfo', {\r
            region: 'center',\r
            minWidth: 300\r
        });\r
        return this.feedInfo;\r
    },\r
    \r
    /**\r
     * Reacts to a feed being selected\r
     * @private\r
     */\r
    onFeedSelect: function(feed, title, url){\r
        this.feedInfo.addFeed(title, url);\r
    }\r
});\r