Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / examples / feed-viewer / FeedPanel.js
1 /*!
2  * Ext JS Library 3.3.1
3  * Copyright(c) 2006-2010 Sencha Inc.
4  * licensing@sencha.com
5  * http://www.sencha.com/license
6  */
7 FeedPanel = function() {
8     FeedPanel.superclass.constructor.call(this, {
9         id:'feed-tree',
10         region:'west',
11         title:'Feeds',
12         split:true,
13         width: 225,
14         minSize: 175,
15         maxSize: 400,
16         collapsible: true,
17         margins:'0 0 5 5',
18         cmargins:'0 5 5 5',
19         rootVisible:false,
20         lines:false,
21         autoScroll:true,
22         root: new Ext.tree.TreeNode('My Feeds'),
23         collapseFirst:false,
24         tbar: [{
25             iconCls:'add-feed',
26             text:'Add Feed',
27             handler: this.showWindow,
28             scope: this
29         },{
30             id:'delete',
31             iconCls:'delete-icon',
32             text:'Remove',
33             handler: function(){
34                 var s = this.getSelectionModel().getSelectedNode();
35                 if(s){
36                     this.removeFeed(s.attributes.url);
37                 }
38             },
39             scope: this
40         }]
41     });
42
43     this.feeds = this.root.appendChild(
44         new Ext.tree.TreeNode({
45             text:'My Feeds',
46             cls:'feeds-node',
47             expanded:true
48         })
49     );
50
51     this.getSelectionModel().on({
52         'beforeselect' : function(sm, node){
53              return node.isLeaf();
54         },
55         'selectionchange' : function(sm, node){
56             if(node){
57                 this.fireEvent('feedselect', node.attributes);
58             }
59             this.getTopToolbar().items.get('delete').setDisabled(!node);
60         },
61         scope:this
62     });
63
64     this.addEvents({feedselect:true});
65
66     this.on('contextmenu', this.onContextMenu, this);
67 };
68
69 Ext.extend(FeedPanel, Ext.tree.TreePanel, {
70
71     onContextMenu : function(node, e){
72         if(!this.menu){ // create context menu on first right click
73             this.menu = new Ext.menu.Menu({
74                 id:'feeds-ctx',
75                 items: [{
76                     id:'load',
77                     iconCls:'load-icon',
78                     text:'Load Feed',
79                     scope: this,
80                     handler:function(){
81                         this.ctxNode.select();
82                     }
83                 },{
84                     text:'Remove',
85                     iconCls:'delete-icon',
86                     scope: this,
87                     handler:function(){
88                         this.ctxNode.ui.removeClass('x-node-ctx');
89                         this.removeFeed(this.ctxNode.attributes.url);
90                         this.ctxNode = null;
91                     }
92                 },'-',{
93                     iconCls:'add-feed',
94                     text:'Add Feed',
95                     handler: this.showWindow,
96                     scope: this
97                 }]
98             });
99             this.menu.on('hide', this.onContextHide, this);
100         }
101         if(this.ctxNode){
102             this.ctxNode.ui.removeClass('x-node-ctx');
103             this.ctxNode = null;
104         }
105         if(node.isLeaf()){
106             this.ctxNode = node;
107             this.ctxNode.ui.addClass('x-node-ctx');
108             this.menu.items.get('load').setDisabled(node.isSelected());
109             this.menu.showAt(e.getXY());
110         }
111     },
112
113     onContextHide : function(){
114         if(this.ctxNode){
115             this.ctxNode.ui.removeClass('x-node-ctx');
116             this.ctxNode = null;
117         }
118     },
119
120     showWindow : function(btn){
121         if(!this.win){
122             this.win = new FeedWindow();
123             this.win.on('validfeed', this.addFeed, this);
124         }
125         this.win.show(btn);
126     },
127
128     selectFeed: function(url){
129         this.getNodeById(url).select();
130     },
131
132     removeFeed: function(url){
133         var node = this.getNodeById(url);
134         if(node){
135             node.unselect();
136             Ext.fly(node.ui.elNode).ghost('l', {
137                 callback: node.remove, scope: node, duration: .4
138             });
139         }
140     },
141
142     addFeed : function(attrs, inactive, preventAnim){
143         var exists = this.getNodeById(attrs.url);
144         if(exists){
145             if(!inactive){
146                 exists.select();
147                 exists.ui.highlight();
148             }
149             return;
150         }
151         Ext.apply(attrs, {
152             iconCls: 'feed-icon',
153             leaf:true,
154             cls:'feed',
155             id: attrs.url
156         });
157         var node = new Ext.tree.TreeNode(attrs);
158         this.feeds.appendChild(node);
159         if(!inactive){
160             if(!preventAnim){
161                 Ext.fly(node.ui.elNode).slideIn('l', {
162                     callback: node.select, scope: node, duration: .4
163                 });
164             }else{
165                 node.select();
166             }
167         }
168         return node;
169     },
170
171     // prevent the default context menu when you miss the node
172     afterRender : function(){
173         FeedPanel.superclass.afterRender.call(this);
174         this.el.on('contextmenu', function(e){
175             e.preventDefault();
176         });
177     }
178 });
179
180 Ext.reg('appfeedpanel', FeedPanel);