X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/examples/key-feed-viewer/viewer/FeedGrid.js?ds=sidebyside diff --git a/examples/key-feed-viewer/viewer/FeedGrid.js b/examples/key-feed-viewer/viewer/FeedGrid.js new file mode 100644 index 00000000..ca99122f --- /dev/null +++ b/examples/key-feed-viewer/viewer/FeedGrid.js @@ -0,0 +1,178 @@ +Ext.define('FeedViewer.FeedGrid', { + extend: 'Ext.grid.Panel', + + alias: 'widget.feedgrid', + + initComponent: function(){ + this.addEvents( + /** + * @event rowdblclick + * Fires when a row is double clicked + * @param {FeedViewer.FeedGrid} this + * @param {Ext.data.Model} model + */ + 'rowdblclick', + /** + * @event select + * Fires when a grid row is selected + * @param {FeedViewer.FeedGrid} this + * @param {Ext.data.Model} model + */ + 'select' + ); + + Ext.apply(this, { + cls: 'feed-grid', + store: Ext.create('Ext.data.Store', { + model: 'FeedItem', + sortInfo: { + property: 'pubDate', + direction: 'DESC' + }, + proxy: { + type: 'ajax', + url: 'feed-proxy.php', + reader: { + type: 'xml', + record: 'item' + } + }, + listeners: { + load: this.onLoad, + scope: this + } + }), + + columns: [{ + text: 'Title', + dataIndex: 'title', + flex: 1, + renderer: this.formatTitle + }, { + text: 'Author', + dataIndex: 'author', + hidden: true, + width: 200 + + }, { + text: 'Date', + dataIndex: 'pubDate', + renderer: this.formatDate, + width: 200 + }], + + viewConfig: { + itemId: 'view', + plugins: [{ + pluginId: 'preview', + ptype: 'preview', + bodyField: 'description', + expanded: true + }], + listeners: { + scope: this, + dblclick: this.onRowDblClick, + afterrender: this.onViewRender + } + } + }); + this.callParent(arguments); + this.on('selectionchange', this.onSelect, this); + }, + + // private + onViewRender: function() { + var me = this; + me.keyNav = Ext.create('Ext.util.KeyNav', me.items.getAt(0).el, { + enter: me.onEnterKey, + scope: me + }); + }, + + onDestroy: function() { + var me = this; + Ext.destroy(me.keyNav); + delete me.keyNav; + me.callParent(arguments); + }, + + onEnterKey: function(e) { + var me = this, + view = me.view, + idx = view.indexOf(view.getSelectedNodes()[0]); + + me.onRowDblClick(view, idx); + }, + + /** + * Reacts to a double click + * @private + * @param {Object} view The view + * @param {Object} index The row index + */ + onRowDblClick: function(view, index){ + this.fireEvent('rowdblclick', this, this.store.getAt(index)); + }, + + + /** + * React to a grid item being selected + * @private + * @param {Ext.model.Selection} model The selection model + * @param {Array} selections An array of selections + */ + onSelect: function(model, selections){ + var selected = selections[0]; + if (selected) { + this.fireEvent('select', this, selected); + } + }, + + /** + * Listens for the store loading + * @private + */ + onLoad: function(){ + this.getSelectionModel().select(0); + }, + + /** + * Instructs the grid to load a new feed + * @param {String} url The url to load + */ + loadFeed: function(url){ + var store = this.store; + store.getProxy().extraParams.feed = url; + store.load(); + }, + + /** + * Title renderer + * @private + */ + formatTitle: function(value, p, record){ + return Ext.String.format('
{0}{1}
', value, record.get('author')); + }, + + /** + * Date renderer + * @private + */ + formatDate: function(date){ + if (!date) { + return ''; + } + + var now = new Date(), d = Ext.Date.clearTime(now, true), notime = Ext.Date.clearTime(date, true).getTime(); + + if (notime === d.getTime()) { + return 'Today ' + Ext.Date.format(date, 'g:i a'); + } + + d = Ext.Date.add(d, 'd', -6); + if (d.getTime() <= notime) { + return Ext.Date.format(date, 'D g:i a'); + } + return Ext.Date.format(date, 'Y/m/d g:i a'); + } +});