PDA

View Full Version : add a mouseover event on a panel



flamant
11 Oct 2010, 5:06 AM
How can we add basic events as "mouseover" on a Ext.Panel ?

Thank you in advance for your answers

psmacarov
11 Oct 2010, 5:18 AM
listeners: {
mouseover: {
fn: function()
{
alert('bla bla');
}

}
}

flamant
11 Oct 2010, 5:29 AM
Hi and thank you for answer.
I tried what you said but it doesn't work

Here is the entire code



var gridPanel = new Ext.Panel( {
id: 'gridPanel_'+sptNbr+'_'+gridNbr,
x: 50,
y: 50,
width: 200,
height: 300,
autoScroll: true,
border: true,
bodyBorder: true,
cls: 'rowGridPanel',
tbar: new Ext.Toolbar({
id: 'toolBar_'+sptNbr+'_'+gridNbr,
hidden: true,
items: [
{ id: 'addRow_'+sptNbr+'_'+gridNbr,
text:'<spring:message code="action.addRow"/>',
iconCls: 'addButtonIcon',
listeners: {
click : function(scope, evt) {
}
}
},
{ id: 'deleteRow_'+sptNbr+'_'+gridNbr,
text:'<spring:message code="action.deleteRow"/>',
iconCls: 'deleteButtonIcon',
listeners: {
click : function(scope, evt) {
}
}

}
]

}),
listeners: {
mouseover: {
fn: function() {
alert('ca passe');
}
}
}
});


I also tried the following :



gridPanel.addEvents('mouseover');
gridPanel.on('mouseover', function() {
alert('ca passe');
});

Condor
11 Oct 2010, 5:38 AM
mouseover is an Ext.Element event. You have to relay it to the Panel after it is rendered, e.g.

listeners: {
render: function(p, e) {
p.el.on('mouseover', function(){
p.fireEvent('mouseover', p, e);
});
}
}

plalx
11 Oct 2010, 7:51 AM
The mouseover event is not directly supported by the panel, but you can add this on it's body element (this.body) or container element (this.getEl()) after the panel has been rendered.

listeners: {
'afterrender': function() {
this.body.on('mouseover', function() {console.log('mouseover');});
},
single: true
}

psmacarov
11 Oct 2010, 8:26 AM
scarsick What's do you mean
is not directly supported ?
What gives 2 me the usage of that construction
this.body.on('mouseover', function() {console.log('mouseover');});
instead of simple implemention listener ?
I try 2 handle this event on Ext.GridPanel and it's work fine
Ext.Grid Panel is successor of Ext.Panel and i think with Ext.Panel it will be work 2.

I am novice of ExtJs, Can you explain to me what the difference?

flamant
11 Oct 2010, 9:07 AM
thank you scarsick it works fine

Now I am facing a new problem : I add mouseover and mouseout events handler on a Panel that has a toolbar (the tollbar is at the begining hidden). the mouseover event set the toolbar visible and the mouseout set the toolbar hidden. The problem is when I hover the toolbar itself the mouseout event is fired and the toolbar disappear, then alternatively the mouseover event is fired (and the toolbar appear) and then the mouseout event is fired (and the toolbar disappear) and so on. I would like to make the toolbar visible when I hover the panel AND also the toolbar

Here is the code :



var gridPanel = new Ext.Panel( {
id: 'gridPanel_'+sptNbr+'_'+gridNbr,
x: powerBuilderXUnitsToPixels(xMinContainerGrid),
y: powerBuilderYUnitsToPixels(yMinContainerGrid),
width: powerBuilderXUnitsToPixels(xMaxContainerGrid-xMinContainerGrid+90),
height: powerBuilderYUnitsToPixels(height-40),
//html: 'Positioned at x:50, y:50',
autoScroll: true,
border: true,
bodyBorder: true,
cls: 'rowGridPanel',
tbar: new Ext.Toolbar({
id: 'toolBar_'+sptNbr+'_'+gridNbr,
hidden: true,
items: [
{ id: 'addRow_'+sptNbr+'_'+gridNbr,
text:'<spring:message code="action.addRow"/>',
iconCls: 'addButtonIcon',
listeners: {
click : function(scope, evt) {
}
}
},
{ id: 'deleteRow_'+sptNbr+'_'+gridNbr,
text:'<spring:message code="action.deleteRow"/>',
iconCls: 'deleteButtonIcon',
listeners: {
click : function(scope, evt) {
}
}

}
]

}),
listeners: {
afterrender : function(scope) {
this.body.on('mouseover', function() { Ext.getCmp('toolBar_'+sptNbr+'_'+gridNbr).setVisible(true); });
this.body.on('mouseout', function() { Ext.getCmp('toolBar_'+sptNbr+'_'+gridNbr).setVisible(false); });
}
}
});


Any suggestion ?

plalx
11 Oct 2010, 10:01 AM
Can you explain to me what the difference?

Well, if you look at the documentation, in the defined by column, you will see that this event is supported directly on the Ext.grid.GridPanel class and does not come by inheritance from Ext.Panel class, so you cannot attach an handler to this event directly using listeners config on a Ext.Panel. Instead, what you have to do is wait until the panel gets rendered so that the DOM elements of the panel exists, and then, attach an event handler to the element of your choice (e.g. panel's body).

By the way, when getting the panel's body using the body property of the panel (this.body), it returns an Ext.Element, which is encapsulating the DOM object representing the panel's body.

psmacarov
11 Oct 2010, 8:48 PM
Thank's scarsick

laurentParis
11 Oct 2010, 9:26 PM
add mouseover and mouseout event on toolbar and stop event on it