PDA

View Full Version : Listeners in XTemplate?



ostkaka
17 Mar 2011, 12:19 AM
Hey,
Lets say I want to make text rendered with an XTemplate clickable like in the image below
http://www8.cs.umu.se/~dit06jbk/alarm.png

It should be possible to react to users clicking on different parts of the text, lets say the user clicks on the "alarm" text, how do I hook up some kind of listener to that?

AndreaCammarata
18 Mar 2011, 12:31 AM
Hey,
Lets say I want to make text rendered with an XTemplate clickable like in the image below
http://www8.cs.umu.se/~dit06jbk/alarm.png

It should be possible to react to users clicking on different parts of the text, lets say the user clicks on the "alarm" text, how do I hook up some kind of listener to that?

Hi ostkaka,
yes it is possibile without problem.
Post your panel and Xtemplate configuration and I will write you how.

ostkaka
18 Mar 2011, 12:55 AM
My XTemplate is really simple:



var feedsHtml = new Ext.XTemplate(
'<tpl for=".">',
'<div class="feedobject">',
'<div class="image">',
'<img src="{imagePath}"/>',
'</div>',

'<span class="name">{type}</span>',
'<span class="description"> {alarmDescription} </span>',

'</div>',
'</tpl>'
);


So what I want to be able to do is detect when a user taps on different parts, lets say the {type} or {alarmDescription} and respond to that :)

Im not sure if this matters, but the code for putting the content into the XTemplate from the beginning is



var html = feedsHtml.applyTemplate(finalArray);
Ext.getCmp('content').update(html);

AndreaCammarata
18 Mar 2011, 1:49 AM
You have to set your panel listeners in this way to use event delegation.



listeners: {
body: {
tap: myFunction,
delegate: '.name'
}
}


In this way, when the user click on dom nodes that has "name" class inside your panel body, the function "myFunction" is call allowing you to manage your application flow.
So you only need to define your "myFunction" in something like



function myFunction(e){
alert('Hello');
}


Hope this helps

ostkaka
18 Mar 2011, 2:20 AM
Yes it sure did, thanks a lot! :D
Cheers!

AndreaCammarata
18 Mar 2011, 2:24 AM
You are welcome ;)

ostkaka
22 Mar 2011, 7:18 AM
I got another question about this though

If I want to add several listeners, say I want to be able to listen whether the user presses "Tom" or "lawnlower_2" how is this solved?

http://www8.cs.umu.se/~dit06jbk/several-listeners.png

How one listener is added, but how do I add others?


new Ext.Panel({
...
...
listeners: {
body: {
tap: recieveTap,
delegate: '.name'
}
}
});

AndreaCammarata
22 Mar 2011, 7:29 AM
You can do it in this way:



listeners: {
body: {
tap: myFunction,
delegate: ['.name', '.other_class']
}
}And then write your hadler function in this way:



function myFunction(e){

switch(e.getTarget()){

case 'name':

alert('User tap on name');
break;

case 'other_class':

alert('User tap on other class');
break;

}
}
Hope this helps.

ostkaka
22 Mar 2011, 8:46 AM
Perfect :D I can't thank you enough :)

AndreaCammarata
22 Mar 2011, 8:58 AM
Perfect :D I can't thank you enough :)

Glad to helps ;)

matt_d_rat
21 Jun 2011, 1:40 AM
Hi andreacammarata,

Thank you for your replies on this as it has been very helpful. I have a similar situation as ostkaka had originally, but I need to reference a particular record when I delegate my click event.

Basically in my X.Template, one of the fields I output is customer name. When the user taps on this it should open up the customer view for that particular customer.

koolaid1551
28 Jul 2011, 12:02 PM
Currently I am trying to do something similar. I am trying to get jplayer to work with Sencha touch, which requires me to do some modifications to jplayer.

I want to use a listener to detect when a user hits a button such as play or stop on my xTemplate(I just want to be able to get an alert for now before I do more coding). For some reason it doesn't appear to be working. Below is my code:



var playerHtml = new Ext.XTemplate(
'<tpl for=".">',
'<div id="jquery_jplayer_1" class="jp-jplayer"></div>',
'<div id="jp_container_1" class="jp-audio">',
'<div class="jp-type-single">',
'<div class="jp-gui">',
'<ul class="jp-controls">',
'<li><a href="#" class="jp-play" tabindex="1">play</a></li>',
'<li><a href="#" class="jp-pause" tabindex="1">pause</a></li>',
'<li><a href="#" class="jp-stop" tabindex="1">stop</a></li>',
'<li><a href="#" class="jp-mute" tabindex="1" title="mute">mute</a></li>',
'<li><a href="#" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>',
'</ul>',
'<div class="jp-progress">',
'<div class="jp-seek-bar">',
'<div class="jp-play-bar"></div>',
'</div>',
'</div>',
'<div class="jp-current-time"></div>',
'<div class="jp-duration"></div>',
'</div>',
'</div>',
'</div>',
'</tpl>'
);




radio.views.SetDetail = Ext.extend(Ext.Panel, {
scroll: "vertical",
layout: {
type: "vbox",
align: "stretch"
},
initComponent: function () {
this.dockedItems = [{
xtype: "toolbar",
title: this.record.data.name,
items: [{
ui: "back",
text: "Back",
scope: this,
handler: function () {
this.ownerCt.setActiveItem(this.prevCard, {
type: "slide",
reverse: true,
scope: this,
after: function () {
this.destroy()
}
})
}
}]
}];
this.items = [{
styleHtmlContent: true,
tpl: playerHtml,
data: this.record.data,
styleHtmlContent: true,
listeners: {
body: {
tap: this.onPlayer,
delegate: ['.jp-play', '.jp-stop']
}
}
}];
radio.views.SetDetail.superclass.initComponent.call(this)
},
onPlayer: function (e) {
switch (e.getTarget()) {
case 'jp-play':
alert('User tap on jp-play');
break;
case 'jp-stop':
alert('User tap on jp-stop');
break;
}
}
});
Ext.reg("setdetail", radio.views.SetDetail);



Currently the SetDetail panel is being fired when the user taps an item on a list. The panel displayers the tpl fine. However I can't get an alert to appear when I click on the play or stop button. I would appreciate any help.

koolaid1551
28 Jul 2011, 12:40 PM
I just wanted to clarify that it works for a single event, but not multiple. For example if I change my code to the following it works when I tap the play button.



listeners: {
body: {
tap: this.onPlayer,
delegate: '.jp-play'
}
}



onPlayer: function (e) {
alert('Hello');
}