examples/feed-viewer/FeedPanel.js

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