examples/key-feed-viewer/MainPanel.js

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