PDA

View Full Version : problems with xtemplate rendering



pkvenu
20 Dec 2011, 2:15 PM
Hi guys,
I have a Xtemplate, select field(used for filtering) and a Panel Container as shown below

X-Template

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={#} class="my-link-class" href="#" style="text-decoration: underline;" dataAttributeName1="{ParkingType}">{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" style="display:none">',
'<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 id={FacilityID} href="#" style="text-decoration: underline;" class="view-on-map">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>',


'<tpl if="ZoneID != 0">',
'<div class="icon">',
'<tpl if="Rendering == 0 ">',
'<img src="resources/images/icon_blueSP.png" width="21" height="34" alt="Parking Zones Icon" />',
' </tpl>',
'<tpl if="Rendering ==1 ">',
'<img src="resources/images/icon_greenSP.png" width="21" height="34" alt="Parking Zones Icon" />',
'</tpl>',
'<tpl if="Rendering ==2 ">',
'<img src="resources/images/icon_yellowSP.png" width="21" height="34" alt="Parking Zones Icon" />',
'</tpl>',
'<tpl if="Rendering ==3 ">',
'<img src="resources/images/icon_redSP.png" width="21" height="34" alt="Parking Zones Icon" />',
'</tpl>',
'</div>',
'<div class="info">',
'<strong><b>Street Parking Zone</b></strong><br />',
'<strong>{Distance} from Location</strong><br />',
'<a id={#} class="my-link-class" href="#" style="text-decoration: underline;" dataAttributeName1="{ParkingType}">{ParkingType:this.ParkingTypeDetailsLinkText(App.View.Constants.DetailsAction.Show)}</a>',
'<div style="margin-bottom: 8px;"></div>',
'<strong>{Availability}</strong><br />',
'<div style="margin-bottom: 8px;"></div>',
'<div id="details{#}" class="detail" style="display:none">',
'<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>',
'<div class="address">',
'{LocationDescription}<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 -");
}
}
}
);


Select Field: Used for Filtering:


var filter = new Ext.form.Select({
options: [
{ text: 'Availability', value: 'Availability' },
{ text: 'Price', value: 'Price' },
{ text: 'Proximity', value: 'Proximity' }
],
label: 'Filter By',
listeners: {
change: function (ctl) {
var filtereddata;
if (ctl.value === App.View.Constants.SortBy.Availability) {
filtereddata = App.stores.ParkingFacility.data.items[3].objSort('SpaceAvailability', -1);
Ext.getCmp('Timeline').update(filtereddata);
Ext.getCmp('Timeline').doComponentLayout();
}
else if (ctl.value === App.View.Constants.SortBy.Price) {
alert("Price: " + ctl.value);
}
else {
filtereddata = App.stores.ParkingFacility.data.items[3].objSort('Distance');
Ext.getCmp('Timeline').update(filtereddata);
Ext.getCmp('Timeline').doComponentLayout();
}
}
}
});


Panel Container:


App.View.TimeLine = Ext.extend(Ext.Panel, {
initComponent: function () {
var config = {
title: 'Result',
id: 'Timeline',
scroll: 'vertical',
tpl: template,
fullscreen: true,
items: [filter],
listeners: {
'afterrender': function (value) {
// Get anchor click to show details
Ext.getCmp('Timeline').getEl().on('click', function (e, t) {
e.stopEvent();
var ele = document.getElementById('details' + t.id);
var action;
if (ele.style.display == "block") {
ele.style.display = "none";
action = App.View.Constants.DetailsAction.Show;
}
else {
ele.style.display = "block";
action = App.View.Constants.DetailsAction.Hide;
}
var text = Ext.getCmp('Timeline').tpl.ParkingTypeDetailsLinkText(t.attributes[3].value, action);
t.innerText = text;


}, null, { delegate: 'a.my-link-class' });
// Get Anchor click to show on Map
Ext.getCmp('Timeline').getEl().on('click', function (e, t) {
e.stopEvent();
alert(t.id);

}, null, { delegate: 'a.view-on-map' });
}
}
};
Ext.apply(this, config);
App.View.TimeLine.superclass.initComponent.call(this);


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


}


});


Ext.reg('App.View.TimeLine', App.View.TimeLine);

I am trying to achieve is when ever i make a selection in the Select field i need to sort the values in the template based on the selection.

Problem:
When ever i update the component the select bar disappears.
Ext.getCmp('Timeline').update(filtereddata);
Ext.getCmp('Timeline').doComponentLayout();
is there a specific way i can just update the template rather than the whole component.

Any help would be appreciated.

Thanks,
Pawan

mitchellsimoens
20 Dec 2011, 2:24 PM
The update method is what is clearing out the select field. You will need to nest your template into a component