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