docs/source/MainPanel.html

   1 <html>\r
   2 <head>\r
   3   <title>The source code</title>\r
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   6 </head>\r
   7 <body  onload="prettyPrint();">\r
   8     <pre class="prettyprint lang-js">MainPanel = function(){\r
   9     this.preview = new Ext.Panel({\r
  10         id: 'preview',\r
  11         region: 'south',\r
  12         cls:'preview',\r
  13         autoScroll: true,\r
  14         listeners: FeedViewer.LinkInterceptor,\r
  15 \r
  16         tbar: [{\r
  17             id:'tab',\r
  18             text: 'View in New Tab',\r
  19             iconCls: 'new-tab',\r
  20             disabled:true,\r
  21             handler : this.openTab,\r
  22             scope: this\r
  23         },\r
  24         '-',\r
  25         {\r
  26             id:'win',\r
  27             text: 'Go to Post',\r
  28             iconCls: 'new-win',\r
  29             disabled:true,\r
  30             scope: this,\r
  31             handler : function(){\r
  32                 window.open(this.gsm.getSelected().data.link);\r
  33             }\r
  34         }],\r
  35 \r
  36         clear: function(){\r
  37             this.body.update('');\r
  38             var items = this.topToolbar.items;\r
  39             items.get('tab').disable();\r
  40             items.get('win').disable();\r
  41         }\r
  42     });\r
  43 \r
  44     this.grid = new FeedGrid(this, {\r
  45         tbar:[{\r
  46             text:'Open All',\r
  47             tooltip: {title:'Open All',text:'Opens all item in tabs'},\r
  48             iconCls: 'tabs',\r
  49             handler: this.openAll,\r
  50             scope:this\r
  51         },\r
  52         '-',\r
  53         {\r
  54             split:true,\r
  55             text:'Reading Pane',\r
  56             tooltip: {title:'Reading Pane',text:'Show, move or hide the Reading Pane'},\r
  57             iconCls: 'preview-bottom',\r
  58             handler: this.movePreview.createDelegate(this, []),\r
  59             menu:{\r
  60                 id:'reading-menu',\r
  61                 cls:'reading-menu',\r
  62                 width:100,\r
  63                 items: [{\r
  64                     text:'Bottom',\r
  65                     checked:true,\r
  66                     group:'rp-group',\r
  67                     checkHandler:this.movePreview,\r
  68                     scope:this,\r
  69                     iconCls:'preview-bottom'\r
  70                 },{\r
  71                     text:'Right',\r
  72                     checked:false,\r
  73                     group:'rp-group',\r
  74                     checkHandler:this.movePreview,\r
  75                     scope:this,\r
  76                     iconCls:'preview-right'\r
  77                 },{\r
  78                     text:'Hide',\r
  79                     checked:false,\r
  80                     group:'rp-group',\r
  81                     checkHandler:this.movePreview,\r
  82                     scope:this,\r
  83                     iconCls:'preview-hide'\r
  84                 }]\r
  85             }\r
  86         },\r
  87         '-',\r
  88         {\r
  89             pressed: true,\r
  90             enableToggle:true,\r
  91             text:'Summary',\r
  92             tooltip: {title:'Post Summary',text:'View a short summary of each item in the list'},\r
  93             iconCls: 'summary',\r
  94             scope:this,\r
  95             toggleHandler: function(btn, pressed){\r
  96                 this.grid.togglePreview(pressed);\r
  97             }\r
  98         }]\r
  99     });\r
 100 \r
 101     MainPanel.superclass.constructor.call(this, {\r
 102         id:'main-tabs',\r
 103         activeTab:0,\r
 104         region:'center',\r
 105         margins:'0 5 5 0',\r
 106         resizeTabs:true,\r
 107         tabWidth:150,\r
 108         minTabWidth: 120,\r
 109         enableTabScroll: true,\r
 110         plugins: new Ext.ux.TabCloseMenu(),\r
 111         items: {\r
 112             id:'main-view',\r
 113             layout:'border',\r
 114             title:'Loading...',\r
 115             hideMode:'offsets',\r
 116             items:[\r
 117                 this.grid, {\r
 118                 id:'bottom-preview',\r
 119                 layout:'fit',\r
 120                 items:this.preview,\r
 121                 height: 250,\r
 122                 split: true,\r
 123                 border:false,\r
 124                 region:'south'\r
 125             }, {\r
 126                 id:'right-preview',\r
 127                 layout:'fit',\r
 128                 border:false,\r
 129                 region:'east',\r
 130                 width:350,\r
 131                 split: true,\r
 132                 hidden:true\r
 133             }]\r
 134         }\r
 135     });\r
 136 \r
 137     this.gsm = this.grid.getSelectionModel();\r
 138 \r
 139     this.gsm.on('rowselect', function(sm, index, record){\r
 140         FeedViewer.getTemplate().overwrite(this.preview.body, record.data);\r
 141         var items = this.preview.topToolbar.items;\r
 142         items.get('tab').enable();\r
 143         items.get('win').enable();\r
 144     }, this, {buffer:250});\r
 145 \r
 146     this.grid.store.on('beforeload', this.preview.clear, this.preview);\r
 147     this.grid.store.on('load', this.gsm.selectFirstRow, this.gsm);\r
 148 \r
 149     this.grid.on('rowdblclick', this.openTab, this);\r
 150 };\r
 151 \r
 152 Ext.extend(MainPanel, Ext.TabPanel, {\r
 153 \r
 154     loadFeed : function(feed){\r
 155         this.grid.loadFeed(feed.url);\r
 156         Ext.getCmp('main-view').setTitle(feed.text);\r
 157     },\r
 158 \r
 159     movePreview : function(m, pressed){\r
 160         if(!m){ // cycle if not a menu item click\r
 161             var items = Ext.menu.MenuMgr.get('reading-menu').items.items;\r
 162             var b = items[0], r = items[1], h = items[2];\r
 163             if(b.checked){\r
 164                 r.setChecked(true);\r
 165             }else if(r.checked){\r
 166                 h.setChecked(true);\r
 167             }else if(h.checked){\r
 168                 b.setChecked(true);\r
 169             }\r
 170             return;\r
 171         }\r
 172         if(pressed){\r
 173             var preview = this.preview;\r
 174             var right = Ext.getCmp('right-preview');\r
 175             var bot = Ext.getCmp('bottom-preview');\r
 176             var btn = this.grid.getTopToolbar().items.get(2);\r
 177             switch(m.text){\r
 178                 case 'Bottom':\r
 179                     right.hide();\r
 180                     bot.add(preview);\r
 181                     bot.show();\r
 182                     bot.ownerCt.doLayout();\r
 183                     btn.setIconClass('preview-bottom');\r
 184                     break;\r
 185                 case 'Right':\r
 186                     bot.hide();\r
 187                     right.add(preview);\r
 188                     right.show();\r
 189                     right.ownerCt.doLayout();\r
 190                     btn.setIconClass('preview-right');\r
 191                     break;\r
 192                 case 'Hide':\r
 193                     preview.ownerCt.hide();\r
 194                     preview.ownerCt.ownerCt.doLayout();\r
 195                     btn.setIconClass('preview-hide');\r
 196                     break;\r
 197             }\r
 198         }\r
 199     },\r
 200 \r
 201     openTab : function(record){\r
 202         record = (record && record.data) ? record : this.gsm.getSelected();\r
 203         var d = record.data;\r
 204         var id = !d.link ? Ext.id() : d.link.replace(/[^A-Z0-9-_]/gi, '');\r
 205         var tab;\r
 206         if(!(tab = this.getItem(id))){\r
 207             tab = new Ext.Panel({\r
 208                 id: id,\r
 209                 cls:'preview single-preview',\r
 210                 title: d.title,\r
 211                 tabTip: d.title,\r
 212                 html: FeedViewer.getTemplate().apply(d),\r
 213                 closable:true,\r
 214                 listeners: FeedViewer.LinkInterceptor,\r
 215                 autoScroll:true,\r
 216                 border:true,\r
 217 \r
 218                 tbar: [{\r
 219                     text: 'Go to Post',\r
 220                     iconCls: 'new-win',\r
 221                     handler : function(){\r
 222                         window.open(d.link);\r
 223                     }\r
 224                 }]\r
 225             });\r
 226             this.add(tab);\r
 227         }\r
 228         this.setActiveTab(tab);\r
 229     },\r
 230 \r
 231     openAll : function(){\r
 232         this.beginUpdate();\r
 233         this.grid.store.data.each(this.openTab, this);\r
 234         this.endUpdate();\r
 235     }\r
 236 });\r
 237 \r
 238 Ext.reg('appmainpanel', MainPanel);</pre>    \r
 239 </body>\r
 240 </html>