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

中间件编程

开发平台:

JavaScript

  1. /*!  * Ext JS Library 3.0.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ /**
  2.  * @class Ext.ux.TaskBar
  3.  * @extends Ext.util.Observable
  4.  */
  5. Ext.ux.TaskBar = function(app){
  6.     this.app = app;
  7.     this.init();
  8. }
  9. Ext.extend(Ext.ux.TaskBar, Ext.util.Observable, {
  10.     init : function(){
  11. this.startMenu = new Ext.ux.StartMenu(Ext.apply({
  12. iconCls: 'user',
  13. height: 300,
  14. shadow: true,
  15. title: 'Jack Slocum',
  16. width: 300
  17. }, this.app.startConfig));
  18. this.startBtn = new Ext.Button({
  19.             text: 'Start',
  20.             id: 'ux-startbutton',
  21.             iconCls:'start',
  22.             menu: this.startMenu,
  23.             menuAlign: 'bl-tl',
  24.             renderTo: 'ux-taskbar-start',
  25.             clickEvent: 'mousedown',
  26.             template: new Ext.Template(
  27. '<table cellspacing="0" class="x-btn {3}"><tbody><tr>',
  28. '<td class="ux-startbutton-left"><i>&#160;</i></td>',
  29.                 '<td class="ux-startbutton-center"><em class="{5} unselectable="on">',
  30.                     '<button class="x-btn-text {2}" type="{1}" style="height:30px;">{0}</button>',
  31.                 '</em></td>',
  32.                 '<td class="ux-startbutton-right"><i>&#160;</i></td>',
  33. "</tr></tbody></table>")
  34.         });
  35.         var width = this.startBtn.getEl().getWidth()+10;
  36.         
  37.         var sbBox = new Ext.BoxComponent({
  38. el: 'ux-taskbar-start',
  39.         id: 'TaskBarStart',
  40.         minWidth: width,
  41. region:'west',
  42. split: true,
  43. width: width
  44. });
  45. this.tbPanel = new Ext.ux.TaskButtonsPanel({
  46. el: 'ux-taskbuttons-panel',
  47. id: 'TaskBarButtons',
  48. region:'center'
  49. });
  50.         var container = new Ext.ux.TaskBarContainer({
  51. el: 'ux-taskbar',
  52. layout: 'border',
  53. items: [sbBox,this.tbPanel]
  54. });
  55. return this;
  56.     },
  57.     
  58.     addTaskButton : function(win){
  59. return this.tbPanel.addButton(win, 'ux-taskbuttons-panel');
  60. },
  61. removeTaskButton : function(btn){
  62. this.tbPanel.removeButton(btn);
  63. },
  64. setActiveButton : function(btn){
  65. this.tbPanel.setActiveButton(btn);
  66. }
  67. });
  68. /**
  69.  * @class Ext.ux.TaskBarContainer
  70.  * @extends Ext.Container
  71.  */
  72. Ext.ux.TaskBarContainer = Ext.extend(Ext.Container, {
  73.     initComponent : function() {
  74.         Ext.ux.TaskBarContainer.superclass.initComponent.call(this);
  75.         
  76.         this.el = Ext.get(this.el) || Ext.getBody();
  77.         this.el.setHeight = Ext.emptyFn;
  78.         this.el.setWidth = Ext.emptyFn;
  79.         this.el.setSize = Ext.emptyFn;
  80.         this.el.setStyle({
  81.             overflow:'hidden',
  82.             margin:'0',
  83.             border:'0 none'
  84.         });
  85.         this.el.dom.scroll = 'no';
  86.         this.allowDomMove = false;
  87.         this.autoWidth = true;
  88.         this.autoHeight = true;
  89.         Ext.EventManager.onWindowResize(this.fireResize, this);
  90.         this.renderTo = this.el;
  91.     },
  92.     fireResize : function(w, h){
  93.         this.fireEvent('resize', this, w, h, w, h);
  94.     }
  95. });
  96. /**
  97.  * @class Ext.ux.TaskButtonsPanel
  98.  * @extends Ext.BoxComponent
  99.  */
  100. Ext.ux.TaskButtonsPanel = Ext.extend(Ext.BoxComponent, {
  101. activeButton: null,
  102. enableScroll: true,
  103. scrollIncrement: 0,
  104.     scrollRepeatInterval: 400,
  105.     scrollDuration: .35,
  106.     animScroll: true,
  107.     resizeButtons: true,
  108.     buttonWidth: 168,
  109.     minButtonWidth: 118,
  110.     buttonMargin: 2,
  111.     buttonWidthSet: false,
  112. initComponent : function() {
  113.         Ext.ux.TaskButtonsPanel.superclass.initComponent.call(this);
  114.         this.on('resize', this.delegateUpdates);
  115.         this.items = [];
  116.         
  117.         this.stripWrap = Ext.get(this.el).createChild({
  118.          cls: 'ux-taskbuttons-strip-wrap',
  119.          cn: {
  120.              tag:'ul', cls:'ux-taskbuttons-strip'
  121.             }
  122. });
  123.         this.stripSpacer = Ext.get(this.el).createChild({
  124.          cls:'ux-taskbuttons-strip-spacer'
  125.         });
  126.         this.strip = new Ext.Element(this.stripWrap.dom.firstChild);
  127.         
  128.         this.edge = this.strip.createChild({
  129.          tag:'li',
  130.          cls:'ux-taskbuttons-edge'
  131.         });
  132.         this.strip.createChild({
  133.          cls:'x-clear'
  134.         });
  135. },
  136. addButton : function(win){
  137. var li = this.strip.createChild({tag:'li'}, this.edge); // insert before the edge
  138.         var btn = new Ext.ux.TaskBar.TaskButton(win, li);
  139. this.items.push(btn);
  140. if(!this.buttonWidthSet){
  141. this.lastButtonWidth = btn.container.getWidth();
  142. }
  143. this.setActiveButton(btn);
  144. return btn;
  145. },
  146. removeButton : function(btn){
  147. var li = document.getElementById(btn.container.id);
  148. btn.destroy();
  149. li.parentNode.removeChild(li);
  150. var s = [];
  151. for(var i = 0, len = this.items.length; i < len; i++) {
  152. if(this.items[i] != btn){
  153. s.push(this.items[i]);
  154. }
  155. }
  156. this.items = s;
  157. this.delegateUpdates();
  158. },
  159. setActiveButton : function(btn){
  160. this.activeButton = btn;
  161. this.delegateUpdates();
  162. },
  163. delegateUpdates : function(){
  164. /*if(this.suspendUpdates){
  165.             return;
  166.         }*/
  167.         if(this.resizeButtons && this.rendered){
  168.             this.autoSize();
  169.         }
  170.         if(this.enableScroll && this.rendered){
  171.             this.autoScroll();
  172.         }
  173.     },
  174.     
  175.     autoSize : function(){
  176.         var count = this.items.length;
  177.         var ow = this.el.dom.offsetWidth;
  178.         var aw = this.el.dom.clientWidth;
  179.         if(!this.resizeButtons || count < 1 || !aw){ // !aw for display:none
  180.             return;
  181.         }
  182.         
  183.         var each = Math.max(Math.min(Math.floor((aw-4) / count) - this.buttonMargin, this.buttonWidth), this.minButtonWidth); // -4 for float errors in IE
  184.         var btns = this.stripWrap.dom.getElementsByTagName('button');
  185.         
  186.         this.lastButtonWidth = Ext.get(btns[0].id).findParent('li').offsetWidth;
  187.         
  188.         for(var i = 0, len = btns.length; i < len; i++) {            
  189.             var btn = btns[i];
  190.             
  191.             var tw = Ext.get(btns[i].id).findParent('li').offsetWidth;
  192.             var iw = btn.offsetWidth;
  193.             
  194.             btn.style.width = (each - (tw-iw)) + 'px';
  195.         }
  196.     },
  197.     
  198.     autoScroll : function(){
  199.      var count = this.items.length;
  200.         var ow = this.el.dom.offsetWidth;
  201.         var tw = this.el.dom.clientWidth;
  202.         
  203.         var wrap = this.stripWrap;
  204.         var cw = wrap.dom.offsetWidth;
  205.         var pos = this.getScrollPos();
  206.         var l = this.edge.getOffsetsTo(this.stripWrap)[0] + pos;
  207.         
  208.         if(!this.enableScroll || count < 1 || cw < 20){ // 20 to prevent display:none issues
  209.             return;
  210.         }
  211.         
  212.         wrap.setWidth(tw); // moved to here because of problem in Safari
  213.         
  214.         if(l <= tw){
  215.             wrap.dom.scrollLeft = 0;
  216.             //wrap.setWidth(tw); moved from here because of problem in Safari
  217.             if(this.scrolling){
  218.                 this.scrolling = false;
  219.                 this.el.removeClass('x-taskbuttons-scrolling');
  220.                 this.scrollLeft.hide();
  221.                 this.scrollRight.hide();
  222.             }
  223.         }else{
  224.             if(!this.scrolling){
  225.                 this.el.addClass('x-taskbuttons-scrolling');
  226.             }
  227.             tw -= wrap.getMargins('lr');
  228.             wrap.setWidth(tw > 20 ? tw : 20);
  229.             if(!this.scrolling){
  230.                 if(!this.scrollLeft){
  231.                     this.createScrollers();
  232.                 }else{
  233.                     this.scrollLeft.show();
  234.                     this.scrollRight.show();
  235.                 }
  236.             }
  237.             this.scrolling = true;
  238.             if(pos > (l-tw)){ // ensure it stays within bounds
  239.                 wrap.dom.scrollLeft = l-tw;
  240.             }else{ // otherwise, make sure the active button is still visible
  241. this.scrollToButton(this.activeButton, true); // true to animate
  242.             }
  243.             this.updateScrollButtons();
  244.         }
  245.     },
  246.     createScrollers : function(){
  247.         var h = this.el.dom.offsetHeight; //var h = this.stripWrap.dom.offsetHeight;
  248.         // left
  249.         var sl = this.el.insertFirst({
  250.             cls:'ux-taskbuttons-scroller-left'
  251.         });
  252.         sl.setHeight(h);
  253.         sl.addClassOnOver('ux-taskbuttons-scroller-left-over');
  254.         this.leftRepeater = new Ext.util.ClickRepeater(sl, {
  255.             interval : this.scrollRepeatInterval,
  256.             handler: this.onScrollLeft,
  257.             scope: this
  258.         });
  259.         this.scrollLeft = sl;
  260.         // right
  261.         var sr = this.el.insertFirst({
  262.             cls:'ux-taskbuttons-scroller-right'
  263.         });
  264.         sr.setHeight(h);
  265.         sr.addClassOnOver('ux-taskbuttons-scroller-right-over');
  266.         this.rightRepeater = new Ext.util.ClickRepeater(sr, {
  267.             interval : this.scrollRepeatInterval,
  268.             handler: this.onScrollRight,
  269.             scope: this
  270.         });
  271.         this.scrollRight = sr;
  272.     },
  273.     
  274.     getScrollWidth : function(){
  275.         return this.edge.getOffsetsTo(this.stripWrap)[0] + this.getScrollPos();
  276.     },
  277.     getScrollPos : function(){
  278.         return parseInt(this.stripWrap.dom.scrollLeft, 10) || 0;
  279.     },
  280.     getScrollArea : function(){
  281.         return parseInt(this.stripWrap.dom.clientWidth, 10) || 0;
  282.     },
  283.     getScrollAnim : function(){
  284.         return {
  285.          duration: this.scrollDuration,
  286.          callback: this.updateScrollButtons,
  287.          scope: this
  288.         };
  289.     },
  290.     getScrollIncrement : function(){
  291.      return (this.scrollIncrement || this.lastButtonWidth+2);
  292.     },
  293.     
  294.     /* getBtnEl : function(item){
  295.         return document.getElementById(item.id);
  296.     }, */
  297.     
  298.     scrollToButton : function(item, animate){
  299.      item = item.el.dom.parentNode; // li
  300.         if(!item){ return; }
  301.         var el = item; //this.getBtnEl(item);
  302.         var pos = this.getScrollPos(), area = this.getScrollArea();
  303.         var left = Ext.fly(el).getOffsetsTo(this.stripWrap)[0] + pos;
  304.         var right = left + el.offsetWidth;
  305.         if(left < pos){
  306.             this.scrollTo(left, animate);
  307.         }else if(right > (pos + area)){
  308.             this.scrollTo(right - area, animate);
  309.         }
  310.     },
  311.     
  312.     scrollTo : function(pos, animate){
  313.         this.stripWrap.scrollTo('left', pos, animate ? this.getScrollAnim() : false);
  314.         if(!animate){
  315.             this.updateScrollButtons();
  316.         }
  317.     },
  318.     
  319.     onScrollRight : function(){
  320.         var sw = this.getScrollWidth()-this.getScrollArea();
  321.         var pos = this.getScrollPos();
  322.         var s = Math.min(sw, pos + this.getScrollIncrement());
  323.         if(s != pos){
  324.          this.scrollTo(s, this.animScroll);
  325.         }        
  326.     },
  327.     onScrollLeft : function(){
  328.         var pos = this.getScrollPos();
  329.         var s = Math.max(0, pos - this.getScrollIncrement());
  330.         if(s != pos){
  331.             this.scrollTo(s, this.animScroll);
  332.         }
  333.     },
  334.     
  335.     updateScrollButtons : function(){
  336.         var pos = this.getScrollPos();
  337.         this.scrollLeft[pos == 0 ? 'addClass' : 'removeClass']('ux-taskbuttons-scroller-left-disabled');
  338.         this.scrollRight[pos >= (this.getScrollWidth()-this.getScrollArea()) ? 'addClass' : 'removeClass']('ux-taskbuttons-scroller-right-disabled');
  339.     }
  340. });
  341. /**
  342.  * @class Ext.ux.TaskBar.TaskButton
  343.  * @extends Ext.Button
  344.  */
  345. Ext.ux.TaskBar.TaskButton = function(win, el){
  346. this.win = win;
  347.     Ext.ux.TaskBar.TaskButton.superclass.constructor.call(this, {
  348.         iconCls: win.iconCls,
  349.         text: Ext.util.Format.ellipsis(win.title, 12),
  350.         renderTo: el,
  351.         handler : function(){
  352.             if(win.minimized || win.hidden){
  353.                 win.show();
  354.             }else if(win == win.manager.getActive()){
  355.                 win.minimize();
  356.             }else{
  357.                 win.toFront();
  358.             }
  359.         },
  360.         clickEvent:'mousedown',
  361.         template: new Ext.Template(
  362. '<table cellspacing="0" class="x-btn {3}"><tbody><tr>',
  363. '<td class="ux-taskbutton-left"><i>&#160;</i></td>',
  364.             '<td class="ux-taskbutton-center"><em class="{5} unselectable="on">',
  365.                 '<button class="x-btn-text {2}" type="{1}" style="height:28px;">{0}</button>',
  366.             '</em></td>',
  367.             '<td class="ux-taskbutton-right"><i>&#160;</i></td>',
  368. "</tr></tbody></table>")            
  369.     });
  370. };
  371. Ext.extend(Ext.ux.TaskBar.TaskButton, Ext.Button, {
  372.     onRender : function(){
  373.         Ext.ux.TaskBar.TaskButton.superclass.onRender.apply(this, arguments);
  374.         this.cmenu = new Ext.menu.Menu({
  375.             items: [{
  376.                 text: 'Restore',
  377.                 handler: function(){
  378.                     if(!this.win.isVisible()){
  379.                         this.win.show();
  380.                     }else{
  381.                         this.win.restore();
  382.                     }
  383.                 },
  384.                 scope: this
  385.             },{
  386.                 text: 'Minimize',
  387.                 handler: this.win.minimize,
  388.                 scope: this.win
  389.             },{
  390.                 text: 'Maximize',
  391.                 handler: this.win.maximize,
  392.                 scope: this.win
  393.             }, '-', {
  394.                 text: 'Close',
  395.                 handler: this.closeWin.createDelegate(this, this.win, true),
  396.                 scope: this.win
  397.             }]
  398.         });
  399.         this.cmenu.on('beforeshow', function(){
  400.             var items = this.cmenu.items.items;
  401.             var w = this.win;
  402.             items[0].setDisabled(w.maximized !== true && w.hidden !== true);
  403.             items[1].setDisabled(w.minimized === true);
  404.             items[2].setDisabled(w.maximized === true || w.hidden === true);
  405.         }, this);
  406.         this.el.on('contextmenu', function(e){
  407.             e.stopEvent();
  408.             if(!this.cmenu.el){
  409.                 this.cmenu.render();
  410.             }
  411.             var xy = e.getXY();
  412.             xy[1] -= this.cmenu.el.getHeight();
  413.             this.cmenu.showAt(xy);
  414.         }, this);
  415.     },
  416.     
  417.     closeWin : function(cMenu, e, win){
  418. if(!win.isVisible()){
  419. win.show();
  420. }else{
  421. win.restore();
  422. }
  423. win.close();
  424. }
  425. });