docs/source/TaskBar.html

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