PDA

View Full Version : Link on tooltip does not find inline ExtJs funciton



Ary_Fortune
13 May 2013, 11:59 PM
The link on the tooltip is not working.

The somefunction1 mentioned below gives me a toottip which works just fine but the tooltip has
dynamic content in it as below

"<a id='6'>Hi</a
<a href='#' id='8' onclick='javascript: someFunction2(8);'>Hello</a><br>"

The onclick on the dynamic content 'Hello' does not let me to the someFunction2 mentioned below.
How do I achieve this.

Making the someFunction2 global, makes it available but then there is not way to get formPanel object
from the global method to make the server call. Please help.

somefunction1: function(formPanel, btnName, list) {
var btn = formPanel.getForm().findButton(btnName);

btn.tooltip = Ext.create('Ext.tip.ToolTip', {
target: btn.el,
delegate: btn.itemSelector,
autoHide: false,
renderTo: Ext.getBody(),
listeners: {
beforeshow: function updateTipBody(tooltip) {
tooltip.update(formPanel.getFldValue(list));
}
}
});
},

someFunction2: function(id) {
var me = this;
vFormPanel = me.getFormPanel();

*****SomeCall to the server(); });
},

mitchellsimoens
15 May 2013, 1:00 PM
Of course it's not. That will try to find a global function not a function on a class. Instead you should put a click listener on the tooltip's element and delegate it to that tag.

Ary_Fortune
16 May 2013, 4:26 AM
Actually I am able to attach event to the dynamic links but the I am not aware of calling the inline js from this listner. The global method call gets called but the inline method is still invisible.

For e.g.

someFunction: function(formPanel, btnName, list) {
var btn = formPanel.getForm().findButton(btnName),
me = formPanel.getFormPanel();

btn.tooltip = Ext.create('Ext.tip.ToolTip', {
target: btn.el,
delegate: btn.itemSelector,
autoHide: false,
renderTo: Ext.getBody(),
listeners: {
beforeshow: function updateTipBody(tooltip) {
tooltip.update(me.getFldValue(list));
}
},
'click': function(){
this.on('click', function(e){
e.stopEvent();
}, this, {delegate: attachEvent()});
}
});
},
where attachEvent is global , it gets called but in case if it is inline then how do I call it, I am not able to make the server call from global method, its only when I attach the elemnts to the inline js, the framework will execute it.

mitchellsimoens
16 May 2013, 4:42 AM
You can put the click listener on it like:


Ext.create('Ext.tip.ToolTip', {
target : btn.el,
delegate : btn.itemSelector,
autoHide : false,
renderTo : Ext.getBody(),
listeners : {
beforeshow : function updateTipBody(tooltip) {
tooltip.update(me.getFldValue(list));
},
click : {
element : 'el',
fn : function (e) {
e.stopEvent();
}
}
}
});

Ary_Fortune
16 May 2013, 5:04 AM
Thanks so much for your response, I tried but it did not work.


To elaborate this I have below code e.g.


SomeHoverEvent: function(formPanel, btnName, list) {
var btn = formPanel.getForm().findButton(btnName),
me = formPanel.getFormPanel();

btn.tooltip = Ext.create('Ext.tip.ToolTip', {
target: btn.el,
delegate: btn.itemSelector,
autoHide: false,
renderTo: Ext.getBody(),
listeners: {
beforeshow: function updateTipBody(tooltip) {
tooltip.update(me.getFldValue(list));
}
},
'click': function(){
this.on('click', function(e){
e.stopEvent();
}, this, {delegate: me.someFunction2(id)});
}
});
},


someFunction2: function(id) {
alert("Inside hdr_getgrouprecord");


},




Here the tooltip has below html link which is in the 'list' variable.
"<a id='6'>Hi</a
<a href='#' id='8' onclick='javascript: someFunction2(8);'>Hello</a><br>"


But this me.someFunction2 in not found, how do I attach this non global js from the link.
When I click on 'hello' in the tooltip link, I need someFunction2 to get called.

mitchellsimoens
16 May 2013, 5:11 AM
You are still not following my code. The click listener is equal to an object which has the element and fn configs. To add to it you can use the delegate : 'a' in that object also.

Ary_Fortune
16 May 2013, 6:41 AM
Actually I am very new to ExtJS,
Below is the code that I have tried according to the above suggestion.
In the above mentioned code, you have not mentioned the somefunction2 function call,
How would the click event know to call it.

if I have to mention it in the listenere than by doing this.somefunction2 does not find it.
The tools tips html onclick="javascript:somefunction2(8);" does not find it.

somefunction1: function(formPanel, btnName, list) {
var btn = formPanel.getForm().findButton(btnName),
me = formPanel.getFormPanel();

btn.tooltip = Ext.create('Ext.tip.ToolTip', {
target: btn.el,
delegate: btn.itemSelector,
autoHide: false,
renderTo: Ext.getBody(),
listeners: {
beforeshow: function updateTipBody(tooltip) {
tooltip.update(me.getFldValue(list));
}
},
click : {
element : 'el',
fn : function (e) {
e.stopEvent();
}
}
});
},

somefunction2: function(pbookingid) {
alert("Inside hdr_getgrouprecord");
},

what corrections would i need in the code to call somefunction2 from tooltips on click.