add extjs 6.0.1 sources

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

Ext.define('FeedViewer.FeedGrid', {\r
    extend: 'Ext.grid.Panel',\r
\r
    alias: 'widget.feedgrid',\r
\r
    /**\r
     * @event rowdblclick\r
     * Fires when a row is double clicked\r
     * @param {FeedViewer.FeedGrid} this\r
     * @param {Ext.data.Model} model\r
     */\r
\r
    /**\r
     * @event select\r
     * Fires when a grid row is selected\r
     * @param {FeedViewer.FeedGrid} this\r
     * @param {Ext.data.Model} model\r
     */\r
\r
    initComponent: function(){\r
        Ext.apply(this, {\r
            cls: 'feed-grid',\r
            store: Ext.create('Ext.data.Store', {\r
                model: 'FeedItem',\r
                sortInfo: {\r
                    property: 'pubDate',\r
                    direction: 'DESC'\r
                },\r
                proxy: {\r
                    type: 'ajax',\r
                    url: 'feed-proxy.php',\r
                    reader: {\r
                        type: 'xml',\r
                        record: 'item'\r
                    },\r
                    listeners: {\r
                        exception: this.onProxyException,\r
                        scope: this\r
                    }\r
                },\r
                listeners: {\r
                    load: this.onLoad,\r
                    scope: this\r
                }\r
            }),\r
\r
            viewConfig: {\r
                itemId: 'view',\r
                plugins: [{\r
                    pluginId: 'preview',\r
                    ptype: 'preview',\r
                    bodyField: 'description',\r
                    expanded: true\r
                }],\r
                listeners: {\r
                    scope: this,\r
                    itemdblclick: this.onRowDblClick\r
                }\r
            },\r
            columns: [{\r
                text: 'Title',\r
                dataIndex: 'title',\r
                flex: 1,\r
                renderer: this.formatTitle\r
            }, {\r
                text: 'Author',\r
                dataIndex: 'author',\r
                hidden: true,\r
                width: 200\r
\r
            }, {\r
                text: 'Date',\r
                dataIndex: 'pubDate',\r
                renderer: this.formatDate,\r
                width: 200\r
            }]\r
        });\r
        this.callParent(arguments);\r
        this.on('selectionchange', this.onSelect, this);\r
    },\r
\r
        /**\r
     * Reacts to a double click\r
     * @private\r
     * @param {Object} view The view\r
     * @param {Object} index The row index\r
     */\r
    onRowDblClick: function(view, record, item, index, e) {\r
        this.fireEvent('rowdblclick', this, this.store.getAt(index));\r
    },\r
\r
\r
    /**\r
     * React to a grid item being selected\r
     * @private\r
     * @param {Ext.model.Selection} model The selection model\r
     * @param {Array} selections An array of selections\r
     */\r
    onSelect: function(model, selections){\r
        var selected = selections[0];\r
        if (selected) {\r
            this.fireEvent('select', this, selected);\r
        }\r
    },\r
\r
    /**\r
     * Listens for the store loading\r
     * @private\r
     */\r
    onLoad: function(store, records, success) {\r
        if (this.getStore().getCount()) {\r
            this.getSelectionModel().select(0);\r
        }\r
    },\r
\r
    /**\r
     * Listen for proxy eerrors.\r
     */\r
    onProxyException: function(proxy, response, operation) {\r
        Ext.Msg.alert("Error with data from server", operation.error);\r
        this.view.el.update('');\r
        \r
        // Update the detail view with a dummy empty record\r
        this.fireEvent('select', this, {data:{}});\r
    },\r
\r
    /**\r
     * Instructs the grid to load a new feed\r
     * @param {String} url The url to load\r
     */\r
    loadFeed: function(url){\r
        var store = this.store;\r
        \r
        store.getProxy().setExtraParam('feed', url);\r
        store.load();\r
    },\r
\r
    /**\r
     * Title renderer\r
     * @private\r
     */\r
    formatTitle: function(value, p, record){\r
        return Ext.String.format('<div class="topic"><b>{0}</b><span class="author">{1}</span></div>', value, record.get('author') || "Unknown");\r
    },\r
\r
    /**\r
     * Date renderer\r
     * @private\r
     */\r
    formatDate: function(date){\r
        if (!date) {\r
            return '';\r
        }\r
\r
        var now = new Date(), d = Ext.Date.clearTime(now, true), notime = Ext.Date.clearTime(date, true).getTime();\r
\r
        if (notime === d.getTime()) {\r
            return 'Today ' + Ext.Date.format(date, 'g:i a');\r
        }\r
\r
        d = Ext.Date.add(d, 'd', -6);\r
        if (d.getTime() <= notime) {\r
            return Ext.Date.format(date, 'D g:i a');\r
        }\r
        return Ext.Date.format(date, 'Y/m/d g:i a');\r
    }\r
});\r