MainPanel.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:8k
源码类别:

中间件编程

开发平台:

JavaScript

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