Question : Extjs: Panel and mouseover/out event

Hi there again,
i have another Extjs question (currently using 3.2) and i cant find an answer in the internet (but some people have the same problem).
I have a panel (call it level1Panel) and in this level1Panel, i have some child-panels with some content...
Now i trigger the mouseover and mouseout event on level1Panel. i do that with 
1:

level1Panel.body.on('mouseover', function(){do something...})


This works fine, but there is a problem:
When the mouse moves over one of the sub-panels inside of level1Panel, the mouseover and mouseout event triggers too!
I wrote some example. You'll find it in the code section. When you try it by yourself, you'll see, that the event triggers, when you move the mouse inside the level1Panel AND it triggers when you enter one of the sub-panels.

is there a solution for this problem, so the event will only trigger one time, when i enter the level1Panel?


regards
Manuel 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:

myTestWindow = new Ext.Window({
		title: 'problem demonstration',
		height: 400,
		width: 500,
		layout: 'border',
		items:[
			level1Panel= new Ext.Panel({
				region:'center',
				layout: 'border',
				items:[
					new Ext.Panel({
						height: 200,
						region: 'north',
						html: 'top panel'
					}),
					new Ext.Panel({
						html: 'centerPanel',
						region: 'center'
					})
				]
			})
		]
	});
	myTestWindow.show();
	level1Panel.body.on('mouseover', function(){alert('this message should only visible on first mouse enter of the level1Panel and not for the childs')})

Answer : Extjs: Panel and mouseover/out event

Hi, I am not that good in your framework. But I would suggest you to create mouseover for all the child and disable it.

More information (jQuery example) is here:
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_26164793.html?cid=1573#a32660990

Regards.
Random Solutions  
 
programming4us programming4us