PDA

View Full Version : Callback caller



laurent64
24 Sep 2010, 2:10 AM
Hello Everyone,

I set up a panel with 3 buttons whose ids are : button1, button2, button3.
All the 3 buttons have the same handler : handler1.

But how could , in handler1, know which button has called it ?



var button1 : {
id : 'button1',
text : 'button1',
handler : handler1
};

var button2 : {
id : 'button2',
text : 'button2',
handler : handler1
};

var button3 : {
id : 'button3',
text : 'button3',
handler : handler1
};

function handler1(){
//dummy for the moment, please help, thanks :)
}

function makePage(){
new Ext.Panel({
fullscreen : true,
items : [button1, button2, button3]
});
}

Ext.setup({
onReady : makePage
});

Kask
24 Sep 2010, 4:14 AM
try something like this ...



Ext.setup({
onReady: function () {
var buttonClick = function (sender, event) {
console.log(sender.id);
}

var button1 = new Ext.Button({
id: 'button1',
text: 'button1',
handler: buttonClick,
scope: this
});

var button2 = new Ext.Button({
id: 'button2',
text: 'button2',
handler: buttonClick,
scope: this
});

var button3 = new Ext.Button({
id: 'button3',
text: 'button3',
handler: buttonClick,
scope: this
});

var panel = new Ext.Panel({
fullscreen: true,
items: [button1, button2, button3]
});
}
});

laurent64
24 Sep 2010, 4:47 AM
Hello Kask :)

Thank you very much for your response, i try it right now :)

--------------------------------------------------------------

Set the 3 buttons handler to


function clicLogging(sender, event){
console.log("sender is "+sender+", event is "+event);
}


And got


sender is [object Object], event is [object Object]
sender is [object Object], event is [object Object]
sender is [object Object], event is [object Object]


So perhaps, i must go at least one step forward in handler logging. But thanks very much :)
If i find it, i post an answer.

Kask
24 Sep 2010, 5:04 AM
If you only do



console.log(sender);
console.log(event);


you will get and be able to browse the object itself in Chrome.

but if you check the sender.id you will know the button that raised the event? So what more do you need?

laurent64
24 Sep 2010, 5:51 AM
You're right, with sender.id i get a string whose pattern could be "ext-com-\\d+".But what i need is either the 'button1' id or 'button2' or 'button3', as i defined it in my code before it is executed. If it is impossible, i'll try something else.
-------------------------------------------
Finally i got a simple and clear solution
1) i set a var such as eventSender in the same scope than the handlers (often, people use onReady function, i don't like groupind so much functionnalities in one lonely place)
2) i make a global handler which does not take any parameter, but read eventSender var
3) i make three functions, one per button, which
3.1) change the eventSender var
3.2) call the global handler

As an illustration :


var eventSender;

var button1 : {
id : 'button1',
text : 'button1'
//Notice : handler no more defined here
};

var button2 : {
id : 'button2',
text : 'button2'
//Notice : handler no more defined here
};

var button3 : {
id : 'button3',
text : 'button3'
//Notice : handler no more defined here
};

function handler1(){
//does something with eventSender var
}

function makePage(){
new Ext.Panel({
fullscreen : true,
items : [button1, button2, button3]
});
Ext.get('button1').on('click', function(){
eventSender = 'button1';
handler1();
});
Ext.get('button2').on('click', function(){
eventSender = 'button2';
handler1();
});
Ext.get('button3').on('click', function(){
eventSender = 'button3';
handler1();
});
}

Ext.setup({
onReady : makePage
});

Kask
24 Sep 2010, 6:19 AM
strange, when i run the code i posted i get 'button1' etc in the console ...

laurent64
24 Sep 2010, 6:50 AM
Could you give me your whole javascript code please ?
Maybe i made a mistake trying to apply your previous advice.

Kask
24 Sep 2010, 8:02 AM
You have my whole code in the previous post. All you have to do is copy/paste it and include the css and js for Sencha Touch 0.95 ...

jay@moduscreate.com
24 Sep 2010, 8:36 AM
It's not an event "sender". Please do not use that term as you're setting laurent64 up for failure.

http://tdg-i.com/img/screencasts/2010-09-24_1236.png

laurent64
24 Sep 2010, 8:50 AM
Oh excuse me . (Post #2)
You're right : It works! Thanks :)

Now, i must find what were wrong in my own code
(I haven't it here for now, on Monday I will be able to do it)

Thanks a lot :)

Kask
24 Sep 2010, 9:25 AM
Please explain yourself jgarcia, in what way does my code setting up laurent64 for failure?
Is it that i used the name event instead of e or eventObject? ... or sender instead of button??? ...

jay@moduscreate.com
24 Sep 2010, 9:31 AM
Because the button is not sending an event. It's simply calling a method. While the user clicking the button generates the click event, which is caught by the button, the button calls the registered "handler" method. The "sender" is actually the user in this case.

It's simply the wrong terminology and incorrect thinking of how it really works.

Kask
24 Sep 2010, 9:50 AM
I have to disagree with you on that, the handler is just a easier way to register to listen to the click event. An event will always tell you who is calling your method, but really never say 'the user'. You havent provided with any better terminology for sender, please do.

In my world, im setting up a handler that will trigger when something happends. I use the same handler method for calls from multiple buttons, and I want to know the specific sender, who called the method. So using the word sender is pretty much correct in the context.

But hey, I will give this a rest. You are in the community support team and surely you know more of this than me. Please just be clear with what im doing wrong and please be creative and tell me what I should say instead, dont just jump the guns if you disagree.

jay@moduscreate.com
24 Sep 2010, 10:00 AM
If you look at the code you'll understand it when i say "The handler is not a direct listener for the click event".

http://tdg-i.com/img/screencasts/2010-09-24_1358.png
http://tdg-i.com/img/screencasts/2010-09-24_1359.png

Kask
24 Sep 2010, 11:45 AM
Im not interested in how its been implemented, thats the beauty of an API. What im getting back is the invoker/sender of my method and the eventObject that triggered the call to my method.

In your own picture, you see that there is not difference if I would have listened to the onPress event or assigned a method to the handler. It still gives me the sender and the event?

jay@moduscreate.com
24 Sep 2010, 11:58 AM
Im not interested in how its been implemented, thats the beauty of an API. What im getting back is the invoker/sender of my method and the eventObject that triggered the call to my method.

In your own picture, you see that there is not difference if I would have listened to the onPress event or assigned a method to the handler. It still gives me the sender and the event?


uh - there is no onPress event.

I'm officially done w/ this thread. If you want to call apples by the name "banana" go for it.

Kask
24 Sep 2010, 12:10 PM
My bad, i meant the tap event thats is triggered in the onPress function just above ...

laurent64
26 Sep 2010, 11:24 PM
You're right, with sender.id i get a string whose pattern could be "ext-com-\\d+".But what i need is either the 'button1' id or 'button2' or 'button3', as i defined it in my code before it is executed. If it is impossible, i'll try something else.


I found why i had these id's => beacuse in my code i had forgotten to give each button a custom id.