Upgrade to ExtJS 3.1.0 - Released 12/16/2009
[extjs.git] / examples / desktop / js / TaskBar.js
index 7724fec..8ff70d5 100644 (file)
@@ -1,5 +1,5 @@
 /*!
- * Ext JS Library 3.0.3
+ * Ext JS Library 3.1.0
  * Copyright(c) 2006-2009 Ext JS, LLC
  * licensing@extjs.com
  * http://www.extjs.com/license
@@ -15,15 +15,15 @@ Ext.ux.TaskBar = function(app){
 \r
 Ext.extend(Ext.ux.TaskBar, Ext.util.Observable, {\r
     init : function(){\r
-               this.startMenu = new Ext.ux.StartMenu(Ext.apply({\r
-                       iconCls: 'user',\r
-                       height: 300,\r
-                       shadow: true,\r
-                       title: 'Jack Slocum',\r
-                       width: 300\r
-               }, this.app.startConfig));\r
-               \r
-               this.startBtn = new Ext.Button({\r
+        this.startMenu = new Ext.ux.StartMenu(Ext.apply({\r
+            iconCls: 'user',\r
+            height: 300,\r
+            shadow: true,\r
+            title: 'Jack Slocum',\r
+            width: 300\r
+        }, this.app.startConfig));\r
+\r
+        this.startBtn = new Ext.Button({\r
             text: 'Start',\r
             id: 'ux-startbutton',\r
             iconCls:'start',\r
@@ -32,52 +32,52 @@ Ext.extend(Ext.ux.TaskBar, Ext.util.Observable, {
             renderTo: 'ux-taskbar-start',\r
             clickEvent: 'mousedown',\r
             template: new Ext.Template(\r
-                               '<table cellspacing="0" class="x-btn {3}"><tbody><tr>',\r
-                               '<td class="ux-startbutton-left"><i>&#160;</i></td>',\r
+                '<table cellspacing="0" class="x-btn {3}"><tbody><tr>',\r
+                '<td class="ux-startbutton-left"><i>&#160;</i></td>',\r
                 '<td class="ux-startbutton-center"><em class="{5} unselectable="on">',\r
                     '<button class="x-btn-text {2}" type="{1}" style="height:30px;">{0}</button>',\r
                 '</em></td>',\r
                 '<td class="ux-startbutton-right"><i>&#160;</i></td>',\r
-                               "</tr></tbody></table>")\r
+                "</tr></tbody></table>")\r
         });\r
 \r
         var width = this.startBtn.getEl().getWidth()+10;\r
-        \r
+\r
         var sbBox = new Ext.BoxComponent({\r
-                       el: 'ux-taskbar-start',\r
-               id: 'TaskBarStart',\r
-               minWidth: width,\r
-                       region:'west',\r
-                       split: true,\r
-                       width: width\r
-               });\r
-               \r
-               this.tbPanel = new Ext.ux.TaskButtonsPanel({\r
-                       el: 'ux-taskbuttons-panel',\r
-                       id: 'TaskBarButtons',\r
-                       region:'center'\r
-               });\r
-                               \r
+            el: 'ux-taskbar-start',\r
+            id: 'TaskBarStart',\r
+            minWidth: width,\r
+            region:'west',\r
+            split: true,\r
+            width: width\r
+        });\r
+\r
+        this.tbPanel = new Ext.ux.TaskButtonsPanel({\r
+            el: 'ux-taskbuttons-panel',\r
+            id: 'TaskBarButtons',\r
+            region:'center'\r
+        });\r
+\r
         var container = new Ext.ux.TaskBarContainer({\r
-                       el: 'ux-taskbar',\r
-                       layout: 'border',\r
-                       items: [sbBox,this.tbPanel]\r
-               });\r
-               \r
-               return this;\r
+            el: 'ux-taskbar',\r
+            layout: 'border',\r
+            items: [sbBox,this.tbPanel]\r
+        });\r
+\r
+        return this;\r
     },\r
-    \r
+\r
     addTaskButton : function(win){\r
-               return this.tbPanel.addButton(win, 'ux-taskbuttons-panel');\r
-       },\r
-       \r
-       removeTaskButton : function(btn){\r
-               this.tbPanel.removeButton(btn);\r
-       },\r
-       \r
-       setActiveButton : function(btn){\r
-               this.tbPanel.setActiveButton(btn);\r
-       }\r
+        return this.tbPanel.addButton(win, 'ux-taskbuttons-panel');\r
+    },\r
+\r
+    removeTaskButton : function(btn){\r
+        this.tbPanel.removeButton(btn);\r
+    },\r
+\r
+    setActiveButton : function(btn){\r
+        this.tbPanel.setActiveButton(btn);\r
+    }\r
 });\r
 \r
 \r
@@ -89,7 +89,7 @@ Ext.extend(Ext.ux.TaskBar, Ext.util.Observable, {
 Ext.ux.TaskBarContainer = Ext.extend(Ext.Container, {\r
     initComponent : function() {\r
         Ext.ux.TaskBarContainer.superclass.initComponent.call(this);\r
-        \r
+\r
         this.el = Ext.get(this.el) || Ext.getBody();\r
         this.el.setHeight = Ext.emptyFn;\r
         this.el.setWidth = Ext.emptyFn;\r
@@ -108,7 +108,7 @@ Ext.ux.TaskBarContainer = Ext.extend(Ext.Container, {
     },\r
 \r
     fireResize : function(w, h){\r
-        this.fireEvent('resize', this, w, h, w, h);\r
+        this.onResize(w, h, w, h);\r
     }\r
 });\r
 \r
@@ -119,9 +119,9 @@ Ext.ux.TaskBarContainer = Ext.extend(Ext.Container, {
  * @extends Ext.BoxComponent\r
  */\r
 Ext.ux.TaskButtonsPanel = Ext.extend(Ext.BoxComponent, {\r
-       activeButton: null,\r
-       enableScroll: true,\r
-       scrollIncrement: 0,\r
+    activeButton: null,\r
+    enableScroll: true,\r
+    scrollIncrement: 0,\r
     scrollRepeatInterval: 400,\r
     scrollDuration: .35,\r
     animScroll: true,\r
@@ -130,69 +130,69 @@ Ext.ux.TaskButtonsPanel = Ext.extend(Ext.BoxComponent, {
     minButtonWidth: 118,\r
     buttonMargin: 2,\r
     buttonWidthSet: false,\r
-       \r
-       initComponent : function() {\r
+\r
+    initComponent : function() {\r
         Ext.ux.TaskButtonsPanel.superclass.initComponent.call(this);\r
         this.on('resize', this.delegateUpdates);\r
         this.items = [];\r
-        \r
+\r
         this.stripWrap = Ext.get(this.el).createChild({\r
-               cls: 'ux-taskbuttons-strip-wrap',\r
-               cn: {\r
-               tag:'ul', cls:'ux-taskbuttons-strip'\r
+            cls: 'ux-taskbuttons-strip-wrap',\r
+            cn: {\r
+                tag:'ul', cls:'ux-taskbuttons-strip'\r
             }\r
-               });\r
+        });\r
         this.stripSpacer = Ext.get(this.el).createChild({\r
-               cls:'ux-taskbuttons-strip-spacer'\r
+            cls:'ux-taskbuttons-strip-spacer'\r
         });\r
         this.strip = new Ext.Element(this.stripWrap.dom.firstChild);\r
-        \r
+\r
         this.edge = this.strip.createChild({\r
-               tag:'li',\r
-               cls:'ux-taskbuttons-edge'\r
+            tag:'li',\r
+            cls:'ux-taskbuttons-edge'\r
         });\r
         this.strip.createChild({\r
-               cls:'x-clear'\r
+            cls:'x-clear'\r
         });\r
-       },\r
-       \r
-       addButton : function(win){\r
-               var li = this.strip.createChild({tag:'li'}, this.edge); // insert before the edge\r
+    },\r
+\r
+    addButton : function(win){\r
+        var li = this.strip.createChild({tag:'li'}, this.edge); // insert before the edge\r
         var btn = new Ext.ux.TaskBar.TaskButton(win, li);\r
-               \r
-               this.items.push(btn);\r
-               \r
-               if(!this.buttonWidthSet){\r
-                       this.lastButtonWidth = btn.container.getWidth();\r
-               }\r
-               \r
-               this.setActiveButton(btn);\r
-               return btn;\r
-       },\r
-       \r
-       removeButton : function(btn){\r
-               var li = document.getElementById(btn.container.id);\r
-               btn.destroy();\r
-               li.parentNode.removeChild(li);\r
-               \r
-               var s = [];\r
-               for(var i = 0, len = this.items.length; i < len; i++) {\r
-                       if(this.items[i] != btn){\r
-                               s.push(this.items[i]);\r
-                       }\r
-               }\r
-               this.items = s;\r
-               \r
-               this.delegateUpdates();\r
-       },\r
-       \r
-       setActiveButton : function(btn){\r
-               this.activeButton = btn;\r
-               this.delegateUpdates();\r
-       },\r
-       \r
-       delegateUpdates : function(){\r
-               /*if(this.suspendUpdates){\r
+\r
+        this.items.push(btn);\r
+\r
+        if(!this.buttonWidthSet){\r
+            this.lastButtonWidth = btn.container.getWidth();\r
+        }\r
+\r
+        this.setActiveButton(btn);\r
+        return btn;\r
+    },\r
+\r
+    removeButton : function(btn){\r
+        var li = document.getElementById(btn.container.id);\r
+        btn.destroy();\r
+        li.parentNode.removeChild(li);\r
+\r
+        var s = [];\r
+        for(var i = 0, len = this.items.length; i < len; i++) {\r
+            if(this.items[i] != btn){\r
+                s.push(this.items[i]);\r
+            }\r
+        }\r
+        this.items = s;\r
+\r
+        this.delegateUpdates();\r
+    },\r
+\r
+    setActiveButton : function(btn){\r
+        this.activeButton = btn;\r
+        this.delegateUpdates();\r
+    },\r
+\r
+    delegateUpdates : function(){\r
+        /*if(this.suspendUpdates){\r
             return;\r
         }*/\r
         if(this.resizeButtons && this.rendered){\r
@@ -202,7 +202,7 @@ Ext.ux.TaskButtonsPanel = Ext.extend(Ext.BoxComponent, {
             this.autoScroll();\r
         }\r
     },\r
-    \r
+\r
     autoSize : function(){\r
         var count = this.items.length;\r
         var ow = this.el.dom.offsetWidth;\r
@@ -211,38 +211,38 @@ Ext.ux.TaskButtonsPanel = Ext.extend(Ext.BoxComponent, {
         if(!this.resizeButtons || count < 1 || !aw){ // !aw for display:none\r
             return;\r
         }\r
-        \r
+\r
         var each = Math.max(Math.min(Math.floor((aw-4) / count) - this.buttonMargin, this.buttonWidth), this.minButtonWidth); // -4 for float errors in IE\r
         var btns = this.stripWrap.dom.getElementsByTagName('button');\r
-        \r
+\r
         this.lastButtonWidth = Ext.get(btns[0].id).findParent('li').offsetWidth;\r
-        \r
-        for(var i = 0, len = btns.length; i < len; i++) {            \r
+\r
+        for(var i = 0, len = btns.length; i < len; i++) {\r
             var btn = btns[i];\r
-            \r
+\r
             var tw = Ext.get(btns[i].id).findParent('li').offsetWidth;\r
             var iw = btn.offsetWidth;\r
-            \r
+\r
             btn.style.width = (each - (tw-iw)) + 'px';\r
         }\r
     },\r
-    \r
+\r
     autoScroll : function(){\r
-       var count = this.items.length;\r
+        var count = this.items.length;\r
         var ow = this.el.dom.offsetWidth;\r
         var tw = this.el.dom.clientWidth;\r
-        \r
+\r
         var wrap = this.stripWrap;\r
         var cw = wrap.dom.offsetWidth;\r
         var pos = this.getScrollPos();\r
         var l = this.edge.getOffsetsTo(this.stripWrap)[0] + pos;\r
-        \r
+\r
         if(!this.enableScroll || count < 1 || cw < 20){ // 20 to prevent display:none issues\r
             return;\r
         }\r
-        \r
+\r
         wrap.setWidth(tw); // moved to here because of problem in Safari\r
-        \r
+\r
         if(l <= tw){\r
             wrap.dom.scrollLeft = 0;\r
             //wrap.setWidth(tw); moved from here because of problem in Safari\r
@@ -270,7 +270,7 @@ Ext.ux.TaskButtonsPanel = Ext.extend(Ext.BoxComponent, {
             if(pos > (l-tw)){ // ensure it stays within bounds\r
                 wrap.dom.scrollLeft = l-tw;\r
             }else{ // otherwise, make sure the active button is still visible\r
-                               this.scrollToButton(this.activeButton, true); // true to animate\r
+                this.scrollToButton(this.activeButton, true); // true to animate\r
             }\r
             this.updateScrollButtons();\r
         }\r
@@ -278,7 +278,7 @@ Ext.ux.TaskButtonsPanel = Ext.extend(Ext.BoxComponent, {
 \r
     createScrollers : function(){\r
         var h = this.el.dom.offsetHeight; //var h = this.stripWrap.dom.offsetHeight;\r
-               \r
+\r
         // left\r
         var sl = this.el.insertFirst({\r
             cls:'ux-taskbuttons-scroller-left'\r
@@ -305,7 +305,7 @@ Ext.ux.TaskButtonsPanel = Ext.extend(Ext.BoxComponent, {
         });\r
         this.scrollRight = sr;\r
     },\r
-    \r
+\r
     getScrollWidth : function(){\r
         return this.edge.getOffsetsTo(this.stripWrap)[0] + this.getScrollPos();\r
     },\r
@@ -320,22 +320,22 @@ Ext.ux.TaskButtonsPanel = Ext.extend(Ext.BoxComponent, {
 \r
     getScrollAnim : function(){\r
         return {\r
-               duration: this.scrollDuration,\r
-               callback: this.updateScrollButtons,\r
-               scope: this\r
+            duration: this.scrollDuration,\r
+            callback: this.updateScrollButtons,\r
+            scope: this\r
         };\r
     },\r
 \r
     getScrollIncrement : function(){\r
-       return (this.scrollIncrement || this.lastButtonWidth+2);\r
+        return (this.scrollIncrement || this.lastButtonWidth+2);\r
     },\r
-    \r
+\r
     /* getBtnEl : function(item){\r
         return document.getElementById(item.id);\r
     }, */\r
-    \r
+\r
     scrollToButton : function(item, animate){\r
-       item = item.el.dom.parentNode; // li\r
+        item = item.el.dom.parentNode; // li\r
         if(!item){ return; }\r
         var el = item; //this.getBtnEl(item);\r
         var pos = this.getScrollPos(), area = this.getScrollArea();\r
@@ -347,21 +347,21 @@ Ext.ux.TaskButtonsPanel = Ext.extend(Ext.BoxComponent, {
             this.scrollTo(right - area, animate);\r
         }\r
     },\r
-    \r
+\r
     scrollTo : function(pos, animate){\r
         this.stripWrap.scrollTo('left', pos, animate ? this.getScrollAnim() : false);\r
         if(!animate){\r
             this.updateScrollButtons();\r
         }\r
     },\r
-    \r
+\r
     onScrollRight : function(){\r
         var sw = this.getScrollWidth()-this.getScrollArea();\r
         var pos = this.getScrollPos();\r
         var s = Math.min(sw, pos + this.getScrollIncrement());\r
         if(s != pos){\r
-               this.scrollTo(s, this.animScroll);\r
-        }        \r
+            this.scrollTo(s, this.animScroll);\r
+        }\r
     },\r
 \r
     onScrollLeft : function(){\r
@@ -371,7 +371,7 @@ Ext.ux.TaskButtonsPanel = Ext.extend(Ext.BoxComponent, {
             this.scrollTo(s, this.animScroll);\r
         }\r
     },\r
-    \r
+\r
     updateScrollButtons : function(){\r
         var pos = this.getScrollPos();\r
         this.scrollLeft[pos == 0 ? 'addClass' : 'removeClass']('ux-taskbuttons-scroller-left-disabled');\r
@@ -386,7 +386,7 @@ Ext.ux.TaskButtonsPanel = Ext.extend(Ext.BoxComponent, {
  * @extends Ext.Button\r
  */\r
 Ext.ux.TaskBar.TaskButton = function(win, el){\r
-       this.win = win;\r
+    this.win = win;\r
     Ext.ux.TaskBar.TaskButton.superclass.constructor.call(this, {\r
         iconCls: win.iconCls,\r
         text: Ext.util.Format.ellipsis(win.title, 12),\r
@@ -402,13 +402,13 @@ Ext.ux.TaskBar.TaskButton = function(win, el){
         },\r
         clickEvent:'mousedown',\r
         template: new Ext.Template(\r
-                       '<table cellspacing="0" class="x-btn {3}"><tbody><tr>',\r
-                       '<td class="ux-taskbutton-left"><i>&#160;</i></td>',\r
+            '<table cellspacing="0" class="x-btn {3}"><tbody><tr>',\r
+            '<td class="ux-taskbutton-left"><i>&#160;</i></td>',\r
             '<td class="ux-taskbutton-center"><em class="{5} unselectable="on">',\r
                 '<button class="x-btn-text {2}" type="{1}" style="height:28px;">{0}</button>',\r
             '</em></td>',\r
             '<td class="ux-taskbutton-right"><i>&#160;</i></td>',\r
-                       "</tr></tbody></table>")            \r
+            "</tr></tbody></table>")\r
     });\r
 };\r
 \r
@@ -460,13 +460,13 @@ Ext.extend(Ext.ux.TaskBar.TaskButton, Ext.Button, {
             this.cmenu.showAt(xy);\r
         }, this);\r
     },\r
-    \r
+\r
     closeWin : function(cMenu, e, win){\r
-               if(!win.isVisible()){\r
-                       win.show();\r
-               }else{\r
-                       win.restore();\r
-               }\r
-               win.close();\r
-       }\r
+        if(!win.isVisible()){\r
+            win.show();\r
+        }else{\r
+            win.restore();\r
+        }\r
+        win.close();\r
+    }\r
 });
\ No newline at end of file