开通博客赚积分
发布资源赚积分
分类

源码开发语言/平台
当前位置：首页 > 源码/资料 > Java编程 > Ajax > 查看源码
TaskBar.js
资源名称：qWikiOffice-Version-1.0.zip　[点击查看]
上传用户：snow1005
上传日期：2015-11-10
资源大小：3151k
文件大小：19k
源码类别：

Ajax

开发平台：

JavaScript

TaskBar.js：源码内容
  1. /*
  2.  * qWikiOffice Desktop 0.8.1
  3.  * Copyright(c) 2007-2008, Integrated Technologies, Inc.
  4.  * licensing@qwikioffice.com
  5.  * 
  6.  * http://www.qwikioffice.com/license
  7.  */
  9. Ext.namespace("Ext.ux");
  11. /**
  12.  * @class Ext.ux.TaskBar
  13.  * @extends Ext.util.Observable
  14.  */
  15. Ext.ux.TaskBar = function(app){
  16.     this.app = app;
  17.     this.init();
  18. }
  20. Ext.extend(Ext.ux.TaskBar, Ext.util.Observable, {
  21.     init : function(){
  22. this.startMenu = new Ext.ux.StartMenu(Ext.apply({
  23. iconCls: 'user',
  24. height: 300,
  25. shadow: true,
  26. title: 'Todd Murdock',
  27. width: 300
  28. }, this.app.startConfig));
  30. this.startButton = new Ext.Button({
  31.             text: 'Start',
  32.             id: 'ux-startbutton',
  33.             iconCls: 'start',
  34.             menu: this.startMenu,
  35.             menuAlign: 'bl-tl',
  36.             renderTo: 'ux-taskbar-start'
  37.         });
  38.         
  39.         var startWidth = Ext.get('ux-startbutton').getWidth() + 10;
  40.         
  41.         var sbBox = new Ext.BoxComponent({
  42. el: 'ux-taskbar-start',
  43.         id: 'TaskBarStart',
  44.         minWidth: startWidth,
  45. region:'west',
  46. split: false,
  47. width: startWidth
  48. });
  50. this.quickStartPanel = new Ext.ux.QuickStartPanel({
  51. el: 'ux-quickstart-panel',
  52.         id: 'TaskBarQuickStart',
  53.         minWidth: 60,
  54. region:'west',
  55. split: true,
  56. width: 94
  57. });
  59. this.taskButtonPanel = new Ext.ux.TaskButtonsPanel({
  60. el: 'ux-taskbuttons-panel',
  61. id: 'TaskBarButtons',
  62. region:'center'
  63. });
  65. /* this.trayPanel = new Ext.ux.QuickStartPanel({ // Todo: make the system tray
  66. el: 'ux-systemtray-panel',
  67.         id: 'TaskBarSystemTray',
  68.         minWidth: 100,
  69. region:'east',
  70. split: true,
  71. width: 180
  72. }); */
  74. var panelWrap = new Ext.Container({
  75. el: 'ux-taskbar-panel-wrap',
  76. items: [this.quickStartPanel,this.taskButtonPanel],
  77. layout: 'border',
  78. region: 'center'
  79. });
  81.         var container = new Ext.ux.TaskBarContainer({
  82. el: 'ux-taskbar',
  83. layout: 'border',
  84. items: [sbBox,panelWrap]
  85. });
  86. this.el = container.el;
  88. return this;
  89.     },
  90.     
  91. setActiveButton : function(btn){
  92. this.taskButtonPanel.setActiveButton(btn);
  93. }
  94. });
  98. /**
  99.  * @class Ext.ux.TaskBarContainer
  100.  * @extends Ext.Container
  101.  */
  102. Ext.ux.TaskBarContainer = Ext.extend(Ext.Container, {
  103.     initComponent : function() {
  104.         Ext.ux.TaskBarContainer.superclass.initComponent.call(this);
  105.         
  106.         this.el = Ext.get(this.el) || Ext.getBody();
  107.         this.el.setHeight = Ext.emptyFn;
  108.         this.el.setWidth = Ext.emptyFn;
  109.         this.el.setSize = Ext.emptyFn;
  110.         this.el.setStyle({
  111.             overflow:'hidden',
  112.             margin:'0',
  113.             border:'0 none'
  114.         });
  115.         this.el.dom.scroll = 'no';
  116.         this.allowDomMove = false;
  117.         this.autoWidth = true;
  118.         this.autoHeight = true;
  119.         Ext.EventManager.onWindowResize(this.fireResize, this);
  120.         this.renderTo = this.el;
  121.     },
  123.     fireResize : function(w, h){
  124.         this.fireEvent('resize', this, w, h, w, h);
  125.     }
  126. });
  130. /**
  131.  * @class Ext.ux.TaskButtonsPanel
  132.  * @extends Ext.BoxComponent
  133.  */
  134. Ext.ux.TaskButtonsPanel = Ext.extend(Ext.BoxComponent, {
  135. activeButton: null,
  136. enableScroll: true,
  137. scrollIncrement: 0,
  138.     scrollRepeatInterval: 400,
  139.     scrollDuration: .35,
  140.     animScroll: true,
  141.     resizeButtons: true,
  142.     buttonWidth: 168,
  143.     minButtonWidth: 118,
  144.     buttonMargin: 2,
  145.     buttonWidthSet: false,
  147. initComponent : function() {
  148.         Ext.ux.TaskButtonsPanel.superclass.initComponent.call(this);
  149.         this.on('resize', this.delegateUpdates);
  150.         this.items = [];
  151.         
  152.         this.stripWrap = Ext.get(this.el).createChild({
  153.          cls: 'ux-taskbuttons-strip-wrap',
  154.          cn: {
  155.              tag:'ul', cls:'ux-taskbuttons-strip'
  156.             }
  157. });
  158.         this.stripSpacer = Ext.get(this.el).createChild({
  159.          cls:'ux-taskbuttons-strip-spacer'
  160.         });
  161.         this.strip = new Ext.Element(this.stripWrap.dom.firstChild);
  162.         
  163.         this.edge = this.strip.createChild({
  164.          tag:'li',
  165.          cls:'ux-taskbuttons-edge'
  166.         });
  167.         this.strip.createChild({
  168.          cls:'x-clear'
  169.         });
  170. },
  172. add : function(win){
  173. var li = this.strip.createChild({tag:'li'}, this.edge); // insert before the edge
  174.         var btn = new Ext.ux.TaskBar.TaskButton(win, li);
  176. this.items.push(btn);
  178. if(!this.buttonWidthSet){
  179. this.lastButtonWidth = btn.container.getWidth();
  180. }
  182. this.setActiveButton(btn);
  183. return btn;
  184. },
  186. remove : function(btn){
  187. var li = document.getElementById(btn.container.id);
  188. btn.destroy();
  189. li.parentNode.removeChild(li);
  191. var s = [];
  192. for(var i = 0, len = this.items.length; i < len; i++) {
  193. if(this.items[i] != btn){
  194. s.push(this.items[i]);
  195. }
  196. }
  197. this.items = s;
  199. this.delegateUpdates();
  200. },
  202. setActiveButton : function(btn){
  203. this.activeButton = btn;
  204. this.delegateUpdates();
  205. },
  207. delegateUpdates : function(){
  208. /*if(this.suspendUpdates){
  209.             return;
  210.         }*/
  211.         if(this.resizeButtons && this.rendered){
  212.             this.autoSize();
  213.         }
  214.         if(this.enableScroll && this.rendered){
  215.             this.autoScroll();
  216.         }
  217.     },
  218.     
  219.     autoSize : function(){
  220.         var count = this.items.length;
  221.         var ow = this.el.dom.offsetWidth;
  222.         var aw = this.el.dom.clientWidth;
  224.         if(!this.resizeButtons || count < 1 || !aw){ // !aw for display:none
  225.             return;
  226.         }
  227.         
  228.         var each = Math.max(Math.min(Math.floor((aw-4) / count) - this.buttonMargin, this.buttonWidth), this.minButtonWidth); // -4 for float errors in IE
  229.         var btns = this.stripWrap.dom.getElementsByTagName('button');
  230.         
  231.         this.lastButtonWidth = Ext.get(btns[0].id).findParent('li').offsetWidth;
  232.         
  233.         for(var i = 0, len = btns.length; i < len; i++) {            
  234.             var btn = btns[i];
  235.             
  236.             var tw = Ext.get(btns[i].id).findParent('li').offsetWidth;
  237.             var iw = btn.offsetWidth;
  238.             
  239.             btn.style.width = (each - (tw-iw)) + 'px';
  240.         }
  241.     },
  242.     
  243.     autoScroll : function(){
  244.      var count = this.items.length;
  245.         var ow = this.el.dom.offsetWidth;
  246.         var tw = this.el.dom.clientWidth;
  247.         
  248.         var wrap = this.stripWrap;
  249.         var cw = wrap.dom.offsetWidth;
  250.         var pos = this.getScrollPos();
  251.         var l = this.edge.getOffsetsTo(this.stripWrap)[0] + pos;
  252.         
  253.         if(!this.enableScroll || count < 1 || cw < 20){ // 20 to prevent display:none issues
  254.             return;
  255.         }
  256.         
  257.         wrap.setWidth(tw); // moved to here because of problem in Safari
  258.         
  259.         if(l <= tw){
  260.             wrap.dom.scrollLeft = 0;
  261.             //wrap.setWidth(tw); moved from here because of problem in Safari
  262.             if(this.scrolling){
  263.                 this.scrolling = false;
  264.                 this.el.removeClass('x-taskbuttons-scrolling');
  265.                 this.scrollLeft.hide();
  266.                 this.scrollRight.hide();
  267.             }
  268.         }else{
  269.             if(!this.scrolling){
  270.                 this.el.addClass('x-taskbuttons-scrolling');
  271.             }
  272.             tw -= wrap.getMargins('lr');
  273.             wrap.setWidth(tw > 20 ? tw : 20);
  274.             if(!this.scrolling){
  275.                 if(!this.scrollLeft){
  276.                     this.createScrollers();
  277.                 }else{
  278.                     this.scrollLeft.show();
  279.                     this.scrollRight.show();
  280.                 }
  281.             }
  282.             this.scrolling = true;
  283.             if(pos > (l-tw)){ // ensure it stays within bounds
  284.                 wrap.dom.scrollLeft = l-tw;
  285.             }else{ // otherwise, make sure the active button is still visible
  286. this.scrollToButton(this.activeButton, true); // true to animate
  287.             }
  288.             this.updateScrollButtons();
  289.         }
  290.     },
  292.     createScrollers : function(){
  293.         var h = this.el.dom.offsetHeight; //var h = this.stripWrap.dom.offsetHeight;
  295.         // left
  296.         var sl = this.el.insertFirst({
  297.             cls:'ux-taskbuttons-scroller-left'
  298.         });
  299.         sl.setHeight(h);
  300.         sl.addClassOnOver('ux-taskbuttons-scroller-left-over');
  301.         this.leftRepeater = new Ext.util.ClickRepeater(sl, {
  302.             interval : this.scrollRepeatInterval,
  303.             handler: this.onScrollLeft,
  304.             scope: this
  305.         });
  306.         this.scrollLeft = sl;
  308.         // right
  309.         var sr = this.el.insertFirst({
  310.             cls:'ux-taskbuttons-scroller-right'
  311.         });
  312.         sr.setHeight(h);
  313.         sr.addClassOnOver('ux-taskbuttons-scroller-right-over');
  314.         this.rightRepeater = new Ext.util.ClickRepeater(sr, {
  315.             interval : this.scrollRepeatInterval,
  316.             handler: this.onScrollRight,
  317.             scope: this
  318.         });
  319.         this.scrollRight = sr;
  320.     },
  321.     
  322.     getScrollWidth : function(){
  323.         return this.edge.getOffsetsTo(this.stripWrap)[0] + this.getScrollPos();
  324.     },
  326.     getScrollPos : function(){
  327.         return parseInt(this.stripWrap.dom.scrollLeft, 10) || 0;
  328.     },
  330.     getScrollArea : function(){
  331.         return parseInt(this.stripWrap.dom.clientWidth, 10) || 0;
  332.     },
  334.     getScrollAnim : function(){
  335.         return {
  336.          duration: this.scrollDuration,
  337.          callback: this.updateScrollButtons,
  338.          scope: this
  339.         };
  340.     },
  342.     getScrollIncrement : function(){
  343.      return (this.scrollIncrement || this.lastButtonWidth+2);
  344.     },
  345.     
  346.     /* getBtnEl : function(item){
  347.         return document.getElementById(item.id);
  348.     }, */
  349.     
  350.     scrollToButton : function(item, animate){
  351.      item = item.el.dom.parentNode; // li
  352.         if(!item){ return; }
  353.         var el = item; //this.getBtnEl(item);
  354.         var pos = this.getScrollPos(), area = this.getScrollArea();
  355.         var left = Ext.fly(el).getOffsetsTo(this.stripWrap)[0] + pos;
  356.         var right = left + el.offsetWidth;
  357.         if(left < pos){
  358.             this.scrollTo(left, animate);
  359.         }else if(right > (pos + area)){
  360.             this.scrollTo(right - area, animate);
  361.         }
  362.     },
  363.     
  364.     scrollTo : function(pos, animate){
  365.         this.stripWrap.scrollTo('left', pos, animate ? this.getScrollAnim() : false);
  366.         if(!animate){
  367.             this.updateScrollButtons();
  368.         }
  369.     },
  370.     
  371.     onScrollRight : function(){
  372.         var sw = this.getScrollWidth()-this.getScrollArea();
  373.         var pos = this.getScrollPos();
  374.         var s = Math.min(sw, pos + this.getScrollIncrement());
  375.         if(s != pos){
  376.          this.scrollTo(s, this.animScroll);
  377.         }        
  378.     },
  380.     onScrollLeft : function(){
  381.         var pos = this.getScrollPos();
  382.         var s = Math.max(0, pos - this.getScrollIncrement());
  383.         if(s != pos){
  384.             this.scrollTo(s, this.animScroll);
  385.         }
  386.     },
  387.     
  388.     updateScrollButtons : function(){
  389.         var pos = this.getScrollPos();
  390.         this.scrollLeft[pos == 0 ? 'addClass' : 'removeClass']('ux-taskbuttons-scroller-left-disabled');
  391.         this.scrollRight[pos >= (this.getScrollWidth()-this.getScrollArea()) ? 'addClass' : 'removeClass']('ux-taskbuttons-scroller-right-disabled');
  392.     }
  393. });
  397. /**
  398.  * @class Ext.ux.TaskBar.TaskButton
  399.  * @extends Ext.Button
  400.  */
  401. Ext.ux.TaskBar.TaskButton = function(win, el){
  402. this.win = win;
  404.     Ext.ux.TaskBar.TaskButton.superclass.constructor.call(this, {
  405.         iconCls: win.iconCls,
  406.         text: Ext.util.Format.ellipsis(win.title, 12),
  407.         tooltip: win.taskbuttonTooltip || win.title,
  408.         renderTo: el,
  409.         handler : function(){
  410.             if(win.minimized || win.hidden){
  411.                 win.show();
  412.             }else if(win == win.manager.getActive()){
  413.                 win.minimize();
  414.             }else{
  415.                 win.toFront();
  416.             }
  417.         },
  418.         clickEvent:'mousedown'
  419.     });
  420. };
  422. Ext.extend(Ext.ux.TaskBar.TaskButton, Ext.Button, {
  423.     onRender : function(){
  424.         Ext.ux.TaskBar.TaskButton.superclass.onRender.apply(this, arguments);
  426.         this.cmenu = new Ext.menu.Menu({
  427.             items: [{
  428.              id: 'restore',
  429.                 text: 'Restore',
  430.                 handler: function(){
  431.                     if(!this.win.isVisible()){
  432.                         this.win.show();
  433.                     }else{
  434.                         this.win.restore();
  435.                     }
  436.                 },
  437.                 scope: this
  438.             },{
  439.                 id: 'minimize',
  440.                 text: 'Minimize',
  441.                 handler: this.win.minimize,
  442.                 scope: this.win
  443.             },{
  444.                 id: 'maximize',
  445.                 text: 'Maximize',
  446.                 handler: this.win.maximize,
  447.                 scope: this.win
  448.             }, '-', {
  449.                 id: 'close',
  450.                 text: 'Close',
  451.                 handler: this.closeWin.createDelegate(this, this.win, true),
  452.                 scope: this.win
  453.             }]
  454.         });
  456.         this.cmenu.on('beforeshow', function(){
  457.             var items = this.cmenu.items.items;
  458.             var w = this.win;
  459.             items[0].setDisabled(w.maximized !== true && w.hidden !== true);
  460.             items[1].setDisabled(w.minimized === true);
  461.             items[2].setDisabled(w.maximized === true || w.hidden === true);
  462. items[2].setDisabled(w.maximizable === false);
  463. items[3].setDisabled(w.closable === false);
  464.         }, this);
  466.         this.el.on('contextmenu', function(e){
  467.          e.stopEvent();
  468.             if(!this.cmenu.el){
  469.                 this.cmenu.render();
  470.             }
  471.             var xy = e.getXY();
  472.             xy[1] -= this.cmenu.el.getHeight();
  473.             this.cmenu.showAt(xy);
  474.         }, this);
  475.     },
  476.     
  477.     closeWin : function(cMenu, e, win){
  478. if(!win.isVisible()){
  479. win.show();
  480. }else{
  481. win.restore();
  482. }
  483. win.close();
  484. },
  486. /**
  487.  * override so autoWidth() is not called
  488.      * @param {String} text The text for the button
  489.      */
  490.     setText : function(text){
  491. if(text){
  492. this.text = text;
  493. if(this.el){
  494. this.el.child("td.x-btn-center " + this.buttonSelector).update(Ext.util.Format.ellipsis(text, 12));
  495. }
  496. }
  497.     },
  498.     
  499.     /**
  500.      * @param {String/Object} tooltip The tooltip for the button - can be a string or QuickTips config object
  501.      */
  502.     setTooltip : function(text){
  503.      if(text){
  504.      this.tooltip = text;
  505.          var btnEl = this.el.child(this.buttonSelector);
  506.          Ext.QuickTips.unregister(btnEl.id);
  507.         
  508.             if(typeof this.tooltip == 'object'){                
  509.                 Ext.QuickTips.register(Ext.apply({
  510.                       target: btnEl.id
  511.                 }, this.tooltip));
  512.             } else {
  513.              btnEl.dom[this.tooltipType] = this.tooltip;
  514.             }
  515.         }
  516.     }
  517. });
  521. /**
  522.  * @class Ext.ux.QuickStartPanel
  523.  * @extends Ext.BoxComponent
  524.  */
  525. Ext.ux.QuickStartPanel = Ext.extend(Ext.BoxComponent, {
  526. enableMenu: true,
  528. initComponent : function(){
  529.         Ext.ux.QuickStartPanel.superclass.initComponent.call(this);
  530.         
  531.         this.on('resize', this.delegateUpdates);
  532.         
  533.         this.menu = new Ext.menu.Menu();
  534.         
  535.         this.items = [];
  536.         
  537.         this.stripWrap = Ext.get(this.el).createChild({
  538.          cls: 'ux-quickstart-strip-wrap',
  539.          cn: {tag:'ul', cls:'ux-quickstart-strip'}
  540. });
  542.         this.stripSpacer = Ext.get(this.el).createChild({
  543.          cls:'ux-quickstart-strip-spacer'
  544.         });
  545.         
  546.         this.strip = new Ext.Element(this.stripWrap.dom.firstChild);
  547.         
  548.         this.edge = this.strip.createChild({
  549.          tag:'li',
  550.          cls:'ux-quickstart-edge'
  551.         });
  552.         
  553.         this.strip.createChild({
  554.          cls:'x-clear'
  555.         });
  556. },
  558. add : function(config){
  559. var li = this.strip.createChild({tag:'li'}, this.edge); // insert before the edge
  560.         
  561. var btn = new Ext.Button(Ext.apply(config, {
  562. cls:'x-btn-icon',
  563. menuText: config.text,
  564. renderTo: li,
  565. text: '' // do not display text
  566. }));
  567.         
  568. this.items.push(btn);
  570. this.delegateUpdates();
  572. return btn;
  573. },
  575. remove : function(btn){
  576. var li = document.getElementById(btn.container.id);
  577. btn.destroy();
  578. li.parentNode.removeChild(li);
  580. var s = [];
  581. for(var i = 0, len = this.items.length; i < len; i++) {
  582. if(this.items[i] != btn){
  583. s.push(this.items[i]);
  584. }
  585. }
  586. this.items = s;
  588. this.delegateUpdates();
  589. },
  591. menuAdd : function(config){
  592. this.menu.add(config);
  593. },
  595. delegateUpdates : function(){
  596.         if(this.enableMenu && this.rendered){
  597.          this.showButtons();
  598.          this.clearMenu();
  599.             this.autoMenu();
  600.         }
  601.     },
  602.     
  603.     showButtons : function(){
  604.      var count = this.items.length;
  605.     
  606.      for(var i = 0; i < count; i++){
  607. this.items[i].show(); 
  608. }
  609.     },
  610.     
  611.     clearMenu : function(){
  612.      this.menu.removeAll();
  613.     },
  615. autoMenu : function(){
  616.      var count = this.items.length;
  617.         var ow = this.el.dom.offsetWidth;
  618.         var tw = this.el.dom.clientWidth;
  619.         
  620.         var wrap = this.stripWrap;
  621.         var cw = wrap.dom.offsetWidth;
  622.         var l = this.edge.getOffsetsTo(this.stripWrap)[0];
  623.         
  624.         if(!this.enableMenu || count < 1 || cw < 20){ // 20 to prevent display:none issues
  625.             return;
  626.         }
  627.         
  628.         wrap.setWidth(tw);
  629.         
  630.         if(l <= tw){
  631.             if(this.showingMenu){
  632.                 this.showingMenu = false;
  633.                 this.menuButton.hide();
  634.             }
  635.         }else{
  636.          tw -= wrap.getMargins('lr');
  637.             
  638.             wrap.setWidth(tw > 20 ? tw : 20);
  639.             
  640.             if(!this.showingMenu){
  641.                 if(!this.menuButton){
  642.                     this.createMenuButton();
  643.                 }else{
  644.                     this.menuButton.show();
  645.                 }
  646.             }
  647.             
  648.             mo = this.getMenuButtonPos();
  649.             
  650.             for(var i = count-1; i >= 0; i--){
  651.              var bo = this.items[i].el.dom.offsetLeft + this.items[i].el.dom.offsetWidth;
  652.             
  653.              if(bo > mo){
  654.              this.items[i].hide();
  656.              var ic = this.items[i].initialConfig,
  657.              config = {
  658.              iconCls: ic.iconCls,
  659.              handler: ic.handler,
  660.              scope: ic.scope,
  661.              text: ic.menuText
  662.              };
  663.             
  664.              this.menuAdd(config);
  665.              }else{
  666.              this.items[i].show();
  667.              }
  668.             }
  669.             
  670.             this.showingMenu = true;
  671.         }
  672.     },
  673.     
  674.     createMenuButton : function(){
  675.     
  676.         var h = this.el.dom.offsetHeight;
  678.         var mb = this.el.insertFirst({
  679.             cls:'ux-quickstart-menubutton-wrap'
  680.         });
  681.         
  682.         mb.setHeight(h);
  683.         
  684.         var btn = new Ext.Button({
  685.          cls:'x-btn-icon',
  686.          id: 'ux-quickstart-menubutton',
  687.          menu: this.menu,
  688.          renderTo: mb
  689.         });
  690.         
  691.         mb.setWidth(Ext.get('ux-quickstart-menubutton').getWidth());
  692.         
  693.         this.menuButton = mb;
  694.     },
  695.     
  696.     getMenuButtonPos : function(){
  697.      return this.menuButton.dom.offsetLeft;
  698.     }
  699. });