PDA

View Full Version : Ext.Window - mouseover/mouseout ?



Chibaw
4 Aug 2011, 4:18 AM
Hi,

I'm new in ExtJs but I generally find all I need on the Documentation, but for this... nothing :x

So, I want to make a window pop when I hover on a button, but at the position of the button and if the mouse quit the button and the window, it disappear.
But unfortunately... when I try something like :



win.on('mouseout', function (event) {
alert("COUCOU");
win.hide();
});


Nothing happens.... So, can somebody show me how can I fix this ?

Tanks a lot !

Julien

mitchellsimoens
4 Aug 2011, 8:23 AM
win.mon(win.el, {
mouseout: function() {
win.hide();
}
});

That work?

Chibaw
4 Aug 2011, 11:20 PM
win = new Ext.Window({
title: 'Menus',
width: 300, height: 300,
x: 50, y: 0,
closeAction: 'hide'
});


win.mon(win.el, {
mouseout: function() {
win.hide();
}
});


I get this with the google Chrome Dev Tools :

Uncaught TypeError: Cannot call method 'on' of undefined
Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of undefined

I tried this too, with the help of the Documentation :



win = new Ext.Window({
title: 'Menus',
width: 300, height: 300,
x: 50, y: 0,
listeners: {
render: function(w) {
w.el.on('mouseout', w.hide());
}
},
closeAction: 'hide'
});



And I get this :

Uncaught TypeError: Object [object Object] has no method 'call'

Dunno if it can be correct...

Mycoding
5 Aug 2011, 2:31 AM
Please try this.

Not very good trick.
I test it a bit it works.



var winTip = new Ext.Window({
id:'idWinTip',
title:'Title',
html:'HTML',
closeAction:'hide',
OVER:false
});
winTip.show();
winTip.hide();


winTip.el.hover(function(){
console.log('1');
winTip.OVER = true;
},function() {
console.log('2');
winTip.OVER = false;
winTip.hide();
});


new Ext.Button({
renderTo:Ext.getBody(),
text:'??????',
listeners:{
mouseover:function(button,e){
console.log('MOUSEOVER BUTTON')

winTip.setPosition(e.xy[0]+20,e.xy[1]-20);
winTip.show();
},
mouseout:function(){
console.log('MOUSEOUT BUTTON');
(function(){
console.log(winTip.OVER);
if(!winTip.OVER){
winTip.hide();
}
}).defer(1500);

//winTip.hide();
}
}
});

mitchellsimoens
5 Aug 2011, 4:50 AM
win.el is not created until after the Window is rendered so you need to add the mon after rendering:


new Ext.Window({
....
listeners : {
afterrender: function(win) {
win.mon(win.el, {....});
}
}
});

Chibaw
5 Aug 2011, 5:00 AM
win.el is not created until after the Window is rendered so you need to add the mon after rendering:


new Ext.Window({
....
listeners : {
afterrender: function(win) {
win.mon(win.el, {....});
}
}
});

Thank's a lot, it work perfectly !