examples/feed-viewer/FeedPanel.js

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