source: trunk/web/addons/job_monarch/lib/extjs-30/examples/desktop/js/TaskBar.js @ 625

Last change on this file since 625 was 625, checked in by ramonb, 15 years ago

lib/extjs-30:

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