PDA

View Full Version : Ext.Window problem with 'resize' event



samotnik
18 Jun 2010, 1:14 AM
Hi!
Could you please help me.
I want to make window, that on 'mouseout' that window will close.


var toolTipWw = new Ext.Window({
html: htmlContent,
autoScroll: true,
constrain: true,
width: '35%',
title: languageData.detailsTitle,
ghost: function() {
return this.el;
},
listeners: {
'render': function (w) {
w.getEl().on('mouseout', function(e) {
if(!e.within(w.getEl(), true)) {
this.close();
}
}, this);
}
}
});

It's working fine. But. When I try to resize it. Window is dissapear. What should I do in that situation ?

Animal
18 Jun 2010, 1:42 AM
Use the mouseleave event. Then you wouldn't have to do all that e.within stuff.

Then, you are going to have to ignore mouseleave if resizing is in process using the Resizer's events to set a flag.

samotnik
18 Jun 2010, 1:55 AM
mr.Animal, thank you very much !!!
Btw, I have done it already :) But I was not sure right it or not use flag. I think, that exist method in ExtJS, something like isResizebleNow() :))))
Ok, I will use flag. But I have a question.


'resize' : function () {
this.isNeedClose = false;
}
and


'render': function (w) {
w.getEl().on('mouseleave', function(e) {
if(this.isNeedClose) this.close();
}, this);
}

But, when I should I set flag true ?

Animal
18 Jun 2010, 3:24 AM
It's when resizing that you need a flag.

On start resize set the flag so that mouseleave doesn't cause a hide.

On end resize clear that flag.

samotnik
18 Jun 2010, 3:32 AM
Thanks a lot !
But, I don't sure whether exist event 'startResize' ?
Sorry, I really don't understand. What is event start resize. How can I catch it ?

Animal
18 Jun 2010, 3:51 AM
http://www.sencha.com/deploy/dev/docs/?class=Ext.Resizable

samotnik
18 Jun 2010, 4:09 AM
mr. Animal thank you again. !!!!

samotnik
18 Jun 2010, 5:24 AM
Could you please help me again.
What about 'move' event ? I there the same event ? like beforeResize

samotnik
18 Jun 2010, 6:00 AM
Ok, Here is working code


Ext.override(Ext.Window, {
initComponent : Ext.Window.prototype.initComponent.createSequence(function() {
this.addEvents(
'startdrag',
'enddrag'
);
})
});
Ext.override(Ext.Window.DD, {
startDrag : Ext.Window.DD.prototype.startDrag.createSequence(function() {
this.win.fireEvent("startdrag");
}),
endDrag : Ext.Window.DD.prototype.endDrag.createSequence(function() {
this.win.fireEvent("enddrag");
})
});

if it need to somebody.
mr. Animal, thanks a lot for ExtJS framework !