PDA

View Full Version : [Desktop Example] Is there anyway...



Topper
26 Oct 2007, 8:27 AM
...to get the taskbar "disabled" when a modal window is opened?

I mean, if have a window that is set to modal:true. The desktop cant be clicked, but the taskbar is still accesible.

Thanks in advance

al_capone
10 Nov 2007, 11:36 AM
Did you find the solution? I have the same problem. I try add div section with id "ux-taskbar" into div with id "x-desktop". TaskBar is disabled when modal window, but he has bad location on page. The question is : How locate taskbar at bottom on page? Change css maybe. But where?

Topper
10 Nov 2007, 11:44 AM
Well, I'm using a temporal home-made solution. In the 'show' or 'close' methods of the desktop windows that need to be modal, I am calling these 2 functions I created:



var maskTaskBar = function(){
var taskbarEl = Ext.get('ux-taskbar');
taskbarEl.mask();
};

var unmaskTaskBar = function(){
var taskbarEl = Ext.get('ux-taskbar');
taskbarEl.unmask();
};


For example:



win.on('show',maskTaskBar);
win.on('close',unmaskTaskBar);


Hope it helps.
Regards.
Topper

brookd
20 Jun 2008, 1:14 PM
I found a decent solution to this problem. I override the windows beforeShow and afterHide events to include the masking of the taskbar. Just include this code anywhere in your app.

Note, the code is identical to the window code with the additon of the two lines to show/hide the mask on the taskbar. God, Ext makes it easy...



Ext.override(Ext.Window, {
beforeShow : function(){

delete this.el.lastXY;
delete this.el.lastLT;
if(this.x === undefined || this.y === undefined){
var xy = this.el.getAlignToXY(this.container, 'c-c');
var pos = this.el.translatePoints(xy[0], xy[1]);
this.x = this.x === undefined? pos.left : this.x;
this.y = this.y === undefined? pos.top : this.y;
}
this.el.setLeftTop(this.x, this.y);

if(this.expandOnShow){
this.expand(false);
}

if(this.modal){
Ext.getBody().addClass("x-body-masked");
this.mask.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
this.mask.show();

// mask the taskbar
Ext.get('ux-taskbar').taskbarEl.mask();

}
},

afterHide : function(){
this.proxy.hide();
if(this.monitorResize || this.modal || this.constrain || this.constrainHeader){
Ext.EventManager.removeResizeListener(this.onWindowResize, this);
}
if(this.modal){
this.mask.hide();
Ext.getBody().removeClass("x-body-masked");

//unmask the taskbar
Ext.get('ux-taskbar').taskbarEl.unmask();

}
if(this.keyMap){
this.keyMap.disable();
}
this.fireEvent("hide", this);
},

});