3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
16 * @class FeedViewer.FeedPanel
17 * @extends Ext.panel.Panel
19 * Shows a list of available feeds. Also has the ability to add/remove and load feeds.
22 * Create a new Feed Panel
23 * @param {Object} config The config object
26 Ext.define('FeedViewer.FeedPanel', {
27 extend: 'Ext.panel.Panel',
29 alias: 'widget.feedpanel',
35 initComponent: function(){
37 items: this.createView(),
38 dockedItems: [this.createToolbar()]
43 * @event feedremove Fired when a feed is removed
44 * @param {FeedPanel} this
45 * @param {String} title The title of the feed
46 * @param {String} url The url of the feed
51 * @event feedselect Fired when a feed is selected
52 * @param {FeedPanel} this
53 * @param {String} title The title of the feed
54 * @param {String} url The url of the feed
59 this.callParent(arguments);
63 * Create the DataView to be used for the feed list.
65 * @return {Ext.view.View}
67 createView: function(){
68 var view = this.view = Ext.create('widget.dataview', {
69 store: Ext.create('Ext.data.Store', {
77 selectionchange: this.onSelectionChange
82 contextmenu: this.onContextMenu,
83 viewready: this.onViewReady
87 itemSelector: '.feed-list-item',
88 overItemCls: 'feed-list-item-hover',
89 tpl: '<tpl for="."><div class="feed-list-item">{title}</div></tpl>'
92 view.on('render', function() {
98 onViewReady: function(){
99 this.view.getSelectionModel().select(this.view.store.first());
103 * Creates the toolbar to be used for controlling feeds.
105 * @return {Ext.toolbar.Toolbar}
107 createToolbar: function(){
108 this.createActions();
109 this.toolbar = Ext.create('widget.toolbar', {
110 items: [this.addAction, this.removeAction]
116 * Create actions to share between toolbar and menu
119 createActions: function(){
120 this.addAction = Ext.create('Ext.Action', {
122 handler: this.onAddFeedClick,
127 this.removeAction = Ext.create('Ext.Action', {
130 handler: this.onRemoveFeedClick,
132 iconCls: 'feed-remove'
137 * Create the context menu
140 createMenu: function(){
141 this.menu = Ext.create('widget.menu', {
144 handler: this.onLoadClick,
147 }, this.removeAction, '-', this.addAction],
157 * Used when view selection changes so we can disable toolbar buttons.
160 onSelectionChange: function(){
161 var selected = this.getSelectedItem();
162 this.toolbar.getComponent('remove').setDisabled(!selected);
163 this.loadFeed(selected);
167 * React to the load feed menu click.
170 onLoadClick: function(){
171 this.loadFeed(this.menu.activeFeed);
177 * @param {Ext.data.Model} rec The feed
179 loadFeed: function(rec){
181 this.fireEvent('feedselect', this, rec.get('title'), rec.get('url'));
186 * Gets the currently selected record in the view.
188 * @return {Ext.data.Model} Returns the selected model. false if nothing is selected.
190 getSelectedItem: function(){
191 return this.view.getSelectionModel().getSelection()[0] || false;
195 * Listens for the context menu event on the view
198 onContextMenu: function(view, index, el, event){
199 var menu = this.menu;
202 menu.activeFeed = view.store.getAt(index);
203 menu.showAt(event.getXY());
207 * React to a feed being removed
210 onRemoveFeedClick: function(){
211 var active = this.menu.activeFeed || this.getSelectedItem();
214 this.animateNode(this.view.getNode(active), 1, 0, {
216 afteranimate: function(){
217 this.view.store.remove(active);
220 this.fireEvent('feedremove', this, active.get('title'), active.get('url'));
225 * React to a feed attempting to be added
228 onAddFeedClick: function(){
229 var win = Ext.create('widget.feedwindow', {
232 feedvalid: this.onFeedValid
239 * React to a validation on a feed passing
241 * @param {FeedViewer.FeedWindow} win
242 * @param {String} title The title of the feed
243 * @param {String} url The url of the feed
245 onFeedValid: function(win, title, url){
246 var view = this.view,
254 this.animateNode(view.getNode(rec), 0, 1);
258 * Animate a node in the view when it is added/removed
260 * @param {Mixed} el The element to animate
261 * @param {Number} start The start opacity
262 * @param {Number} end The end opacity
263 * @param {Object} listeners (optional) Any listeners
265 animateNode: function(el, start, end, listeners){
266 Ext.create('Ext.fx.Anim', {
280 onDestroy: function(){
285 this.callParent(arguments);