View Full Version : Dragging Window over Another Window Losing Focus

22 Sep 2009, 7:06 AM
I am making a map application and one of the panels has mouse over events. When I drag a new Window containing Tabs over the map I will lose the Window and have to move very slow. I was thinking of loading a div over the map graying it out on Window move but I am having issues putting a div over another div.

Maybe I am going about this wrong any suggestions? Below is the code for the original map panel. A solution for me would be an example of how to load a DIV over the 'map' item below and maybe have it be called on window move and of course I could use the same concept for other loading type actions.

new Ext.Viewport({
layout: 'border',
defaults: {
split: true
items: [{
title: 'Map',
iconCls: 'maparea',
layout: 'fit',
region: 'center',
items: [{
xtype: 'container',
id: 'map',
cls: 'classname'
}, {

Below code for opening new window. This is the window that is hard to drag over map.

new Ext.Window({
id: 'reportingPanel',
collapsible: true,
closeAction :'hide',
closable: true,
minimizable: true,
height : 400,
width : 800,
layout : 'fit',
title : 'Reports',
items : {

Please help as I am getting low responses so far on this forum and the project is not moving very fast. It was my idea to use EXT JS and I am trying to make this work.

22 Sep 2009, 7:11 AM

22 Sep 2009, 7:13 AM
What do you mean you're getting "Low responses" on this forum?

22 Sep 2009, 7:15 AM
Relying on timely, free help from strangers when setting out your project schedule may not have been the best decision.

22 Sep 2009, 7:18 AM
I agree but we will be buying a license and paying for support but at this point I am just hoping for a bit of support on 'noobie' questions till I get adjusted to the technology. Don't ask my why I waited so long to get on the Web 2.0 bandwagon but my learning curve is great. Thanks for the responses and I meant no disrespect but many of my questions have not been responded to. I do understand open source and community based support. I will check out your links now thanks!

22 Sep 2009, 7:23 AM
Mask is awesome I will go with that on this window drag issue and my log in process now that I see what it does. Based on mask I have a listener setup to listener for window.on('move') event. But that does not fire until your done moving. Is there a before move or something that fires when you start moving the window?

22 Sep 2009, 7:27 AM
This (http://www.extjs.com/forum/showthread.php?p=389034#post389034) may help out with that.

22 Sep 2009, 7:54 AM
That works great, will add a timer in to prevent over calling the mask() for my purpose but overall that will fix any windows I have and am currently moving around the screen. This makes the application look much nicer as well. Thanks all!

22 Sep 2009, 7:59 AM
I think it could be a good idea if Ext.Window fires events when it is dragged. It has events for being sized, so why not drag too?

Modifying your code Doug, I like the convenience of

var wDD = Ext.Window.DD;
Ext.override(wDD, {
b4Drag : wDD.prototype.b4Drag.createInterceptor(function(){
this.win.fireEvent('beforedrag', this.win);
onDrag : wDD.prototype.onDrag.createSequence(function(){
this.win.fireEvent('drag', this.win);
endDrag : wDD.prototype.endDrag.createSequence(function(){
this.win.fireEvent('afterdrag', this.win);

22 Sep 2009, 8:00 AM
Yep I contemplated that, just wasn't sure all those events were defined in Window/Panel yet.


b4Drag : wDD.prototype.b4Drag.createInterceptor(function(){
return this.win.fireEvent('beforedrag', this.win);

22 Sep 2009, 8:06 AM
Well I skipped the timer complication and did just that only used the start and end functions. This works very very well. If I have any windows and they get dragged the map grays out until dropped.

I agree with Animal as well this should be standard listened why not on.startmove to go along with the current on.move?

var wDD = Ext.Window.DD;
Ext.override(wDD, {
//b4Drag: wDD.prototype.b4Drag.createInterceptor(function() {
// console.log('before');
startDrag: wDD.prototype.startDrag.createInterceptor(function() {
endDrag: wDD.prototype.endDrag.createInterceptor(function() {

22 Sep 2009, 8:08 AM
You can fire events without having to add them.