examples/key-feed-viewer/MainPanel.js

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