examples/feed-viewer/FeedPanel.js

   1 /*!
   2  * Ext JS Library 3.2.2
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.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);