PDA

View Full Version : toggle div content on click of hyper link in xtemplate.



pkvenu
30 Nov 2011, 3:14 PM
Hi guys,

I have a HTML anchor in my template. On click of the template i need to toggle a div. Can some one tell me how to achieve this in sencha touch.


var template = new Ext.XTemplate(

'<tpl for=".">',
'<div class="results">',
'<tpl if="ZoneID == 0 ">',
'<div class="icon">',
'<tpl if="Rendering == 0 ">',
'<img src="resources/images/icon_blueP.png" width="21" height="34" alt="Parking Facilities Icon" />',
'</tpl>',
'<tpl if="Rendering ==1 ">',
'<img src="resources/images/icon_greenP.png" width="21" height="34" alt="Parking Facilities Icon" />',
'</tpl>',
'<tpl if="Rendering ==2 ">',
'<img src="resources/images/icon_yellowP.png" width="21" height="34" alt="Parking Facilities Icon" />',
'</tpl>',
'<tpl if="Rendering ==3 ">',
'<img src="resources/images/icon_redP.png" width="21" height="34" alt="Parking Facilities Icon" />',
'</tpl>',
'</div>',
'<div class="info">',
'<strong><b>{ParkingType}</b></strong><br />',
'<strong><b>{Distance} from Location</b></strong><br />',
'<a href="#" style="text-decoration: underline;">Show More Detail</a>',
'<div style="margin-bottom: 8px;"></div>',
'<strong>{Availability}<br/></strong>',
'<tpl if="Price != null ">',
'{Price}',
'</tpl><br />',

'<div style="margin-bottom: 8px;"></div>',
'<div id="details">',
'<strong>Facility ID:</strong>{FacilityID}<br />',
'<strong>Entry Height:</strong> 7ft<br />',
'<strong>Hours:</strong>{Hours}<br />',
'<tpl if="Enterance != null ">',
'<strong>Entrance Locations:</strong>{Entrance}<br />',
'</tpl>',
'<strong>Available Services:</strong><br />',
'Valet Parking, Electric Charging Stations<br />',
'<strong>Payment Options:</strong><br />',
'Cash, Visa, MC, AmEX<br /><br />',
'</div>',
'<a href="#" style="text-decoration: underline;">View On Map</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" style="text-decoration: underline;">Get Driving Directions</a><br />',
'</div><!-- END info -->',
'<div class="address">',
'{LotName}<br />',
'{Street}<br />',
'{Contact}',
'</div><!-- END address -->',
'<div style="clear: both;"></div>',
'</tpl>',
'</div>',
'</tpl>'

);

In the code on click of the hyperlink "Show More Details" I need to slide the div "Details" to show the content and toggle back (slide up) on the next click. Basically a toggle to show and hide div.

mitchellsimoens
1 Dec 2011, 8:38 AM
Have you been able to capture when clicking on the link?

pkvenu
1 Dec 2011, 11:17 AM
I have not been able to capture the click event.

I tried adding a listener to x template as shown below but doesn't seems to work.


var template = new Ext.XTemplate(

'<tpl for=".">',
'<div class="results">',
'<tpl if="ZoneID == 0 ">',
'<div class="icon">',
'<tpl if="Rendering == 0 ">',
'<img src="resources/images/icon_blueP.png" width="21" height="34" alt="Parking Facilities Icon" />',
'</tpl>',
'<tpl if="Rendering ==1 ">',
'<img src="resources/images/icon_greenP.png" width="21" height="34" alt="Parking Facilities Icon" />',
'</tpl>',
'<tpl if="Rendering ==2 ">',
'<img src="resources/images/icon_yellowP.png" width="21" height="34" alt="Parking Facilities Icon" />',
'</tpl>',
'<tpl if="Rendering ==3 ">', '<img src="resources/images/icon_redP.png" width="21" height="34" alt="Parking Facilities Icon" />',
'</tpl>',
'</div>',
'<div class="info">',
'<strong><b>{ParkingType}</b></strong><br />',
'<strong><b>{Distance} from Location</b></strong><br />',
'<a id={# - 1} href="#" style="text-decoration: underline;">{ParkingType:this.ParkingTypeDetailsLinkText(App.View.Constants.DetailsAction.Show)}</a>',
'<div style="margin-bottom: 8px;"></div>',
'<strong>{Availability}<br/></strong>',
'<tpl if="Price != null ">',
'{Price}',
'</tpl><br />',

'<div style="margin-bottom: 8px;"></div>',
'<div id="details" class="detail">',
'<strong>Facility ID:</strong>{FacilityID}<br />',
'<strong>Entry Height:</strong> 7ft<br />',
'<strong>Hours:</strong>{Hours}<br />',
'<tpl if="Enterance != null ">',
'<strong>Entrance Locations:</strong>{Entrance}<br />',
'</tpl>',
'<strong>Available Services:</strong><br />',
'Valet Parking, Electric Charging Stations<br />',
'<strong>Payment Options:</strong><br />',
'Cash, Visa, MC, AmEX<br /><br />',
'</div>',
'<a href="#" style="text-decoration: underline;">View On Map</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" style="text-decoration: underline;">Get Driving Directions</a><br />',
'</div><!-- END info -->',
'<div class="address">',
'{LotName}<br />',
'{Street}<br />',
'{Contact}',
'</div><!-- END address -->',
'<div style="clear: both;"></div>',
'</tpl>',
'</div>',
'</tpl>',
{
ParkingTypeDetailsLinkText: function (parkingType, action) {
if (parkingType === App.View.Constants.ParkingType.OnStreet) {
return (action === App.View.Constants.DetailsAction.Show ? "Show Block Level +" : "Hide Block Level -");
} else {
return (action === App.View.Constants.DetailsAction.Show ? "Show All Details +" : "Show Less Detail -");
}
},
listeners: {
el: {
tap: function (ctl) {
var clickedid = ctl.target.id;
},
delegate: 'a'
}
}
}
);

pkvenu
1 Dec 2011, 1:24 PM
mitchellsimoens,

I was able to detect the click by adding a listener to the main Panel.


App.View.TimeLine = Ext.extend(Ext.Panel, {
initComponent: function () {
var config = {
title: 'Result',
id: 'Timeline',
layout: 'auto',
scroll: 'vertical',
tpl: template,
listeners: {
'afterrender': function () {
Ext.getCmp('Timeline').getEl().on('click', function (e, t) {
e.stopEvent();
alert('link ' + t.id + 'clicked');
}, null, { delegate: 'a.my-link-class' });
}
}
};
Ext.apply(this, config);
App.View.TimeLine.superclass.initComponent.call(this);

},
onLoad: function (data) {
console.log('OnLoad TimeLine Called .....');

}

});


Can you tell me the best way to toggle a div in sencha touch. Is there any animate function which i use to toggle a div.