-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
+/*!
+ * Ext JS Library 3.1.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
/**\r
* @class Ext.ux.TaskBar\r
* @extends Ext.util.Observable\r
\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
menu: this.startMenu,\r
menuAlign: 'bl-tl',\r
renderTo: 'ux-taskbar-start',\r
- clickEvent:'mousedown',\r
+ clickEvent: 'mousedown',\r
template: new Ext.Template(\r
- '<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',\r
- '<td class="ux-startbutton-left"><i> </i></td><td class="ux-startbutton-center"><em unselectable="on"><button class="x-btn-text" type="{1}" style="height:30px;">{0}</button></em></td><td class="ux-startbutton-right"><i> </i></td>',\r
- "</tr></tbody></table>")\r
+ '<table cellspacing="0" class="x-btn {3}"><tbody><tr>',\r
+ '<td class="ux-startbutton-left"><i> </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> </i></td>',\r
+ "</tr></tbody></table>")\r
});\r
- \r
- var width = Ext.get('ux-startbutton').getWidth()+10;\r
- \r
+\r
+ var width = this.startBtn.getEl().getWidth()+10;\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
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
},\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
* @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
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
this.autoScroll();\r
}\r
},\r
- \r
+\r
autoSize : function(){\r
var count = this.items.length;\r
var ow = this.el.dom.offsetWidth;\r
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
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
\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
});\r
this.scrollRight = sr;\r
},\r
- \r
+\r
getScrollWidth : function(){\r
return this.edge.getOffsetsTo(this.stripWrap)[0] + this.getScrollPos();\r
},\r
\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
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
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
* @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
},\r
clickEvent:'mousedown',\r
template: new Ext.Template(\r
- '<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',\r
- '<td class="ux-taskbutton-left"><i> </i></td><td class="ux-taskbutton-center"><em unselectable="on"><button class="x-btn-text" type="{1}" style="height:28px;">{0}</button></em></td><td class="ux-taskbutton-right"><i> </i></td>',\r
- "</tr></tbody></table>")\r
+ '<table cellspacing="0" class="x-btn {3}"><tbody><tr>',\r
+ '<td class="ux-taskbutton-left"><i> </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> </i></td>',\r
+ "</tr></tbody></table>")\r
});\r
};\r
\r
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