PDA

View Full Version : Using img tags in XTemplate definition



parky128
25 Jun 2010, 7:59 AM
Hi There,

I am using an XTemplate within a dataview and as part of the definition I am using <img> tags to render custom icons based on template function calls:


dataview = new Ext.DataView({
id: 'unitsDataView',
itemSelector: 'li',
autoScroll : true,
store: store,
tpl : new Ext.XTemplate(
'<ul>',
'<tpl for=".">',
'<li class="{[this.className(values.numberOfNewAlarms, values.inJourney)]}" id="{[this.liid(values.untID)]}"> ',
'<table class="{[this.className(values.numberOfNewAlarms, values.inJourney)]}" width="100%">',
'<tr>',
'<td colspan="2" class="nameHeader">',
'{untName}',
'</td>',
'</tr>',
'<tr>',
'<td>',
'<img src="Images/Dashboard/blank_profile_pic.jpg"/>',
'</td>',
'<td>',
'<b>{eventDTLocalDisplay} </b><span>{[values.location.split("<br/>")[0]]} ({status})</span>',
'</td>',
'</tr>',
'<tr>',
'<td colspan="2" align="right">',
'<img src="{[this.powerStatusIconPath(values.hasPower)]}" alt="{[this.powerStatusIconAltText(values.hasPower)]}"/>',
'<img src="{[this.onOffStatusIconPath(values.switchedOn)]}" alt="{[this.onOffStatusIconAltText(values.switchedOn)]}"/>',
'<img src="{[this.alarmStatusIconPath(values.numberOfNewAlarms)]}" alt="{[this.alarmStatusIconAltText(values.numberOfNewAlarms)]}"/>',
'</td>',
'</tr>',
'</table>',
'</li>',
'</tpl>',
'</ul>',
{

liid: function(untID) {
return 'li_'+untID;
},
className: function(numberOfNewAlarms, inJourney) {
if(numberOfNewAlarms>0) return 'status2';
else if(inJourney==true)return 'status0';
else if(inJourney==false)return 'status1';
else return 'status3';
},
powerStatusIconPath: function(hasPower) {
if(hasPower==true)
return "images/MapIcons/310.gif";
else
return "images/MapIcons/300.gif";
},
powerStatusIconAltText: function(hasPower) {
if(hasPower==true)
return "The device is powered.";
else
return "The device is not powered.";
},
onOffStatusIconPath: function(switchedOn) {
if(switchedOn==true)
return "images/Dashboard/toolbar/accept.png";
else
return "images/Dashboard/toolbar/stop.png";
},
onOffStatusIconAltText: function(switchedOn) {
if(switchedOn==true)
return "The device is switched on.";
else
return "The device is switched off.";
},
alarmStatusIconPath: function(noOfAlarms) {
if(noOfAlarms>0)
return "images/Dashboard/toolbar/exclamation.png";
else
return "images/Dashboard/menu/bell_delete.png";
},
alarmStatusIconAltText: function(noOfAlarms) {
if(noOfAlarms>0)
return "The device is in an alarm state.";
else
return "The device is not in an alarm state";
}
}
),

listeners:{
contextmenu: function(dataView, index, node, e ){
var untID = node.id.replace('li_','');
e.stopEvent();
dataView.cm = new Ext.menu.Menu(
[{
text: "Show On Map",
iconCls: 'map',
handler: function() {

parent.pm.ShowSingleUnit(untID);
parent.pm.ShowPage('location/current/map');
this.parentMenu.hide();


}

},{
text: "Show History",
iconCls: 'history',
handler: function() {

parent.pm.ShowPage('location/history/nomap');

}


},{
text: "Manage Alarms",
iconCls: 'bell',
handler: function() {
parent.pm.ShowPage('message');
}


},{
text: "Edit Details",
iconCls: 'edit',
handler: function() {
parent.pm.ShowUpdateUnitDetailsDialog(untID)
}


}]
);
dataView.cm.showAt(e.getXY());

}
}

});Everything is displaying for me as expected, but I am having a problem with the 'alt' text for the images as they will not display. In Firefox I can inspect the image elements and can see the alt properties are being set, they just do not appear when mousing over them in the data view control. I tried whacking the z-index of the images right up to 10000 thinking it may be something to do with that, but it made no difference.

Anyone out there come across this before or know where I am going wrong?

Thanks in advance.

Rob

Animal
25 Jun 2010, 9:24 AM
I'd recommend using a QuickTip instance targetted on your DataView's element, and using the delegate: 'img.<Add your own class to the images>'

parky128
28 Jun 2010, 4:06 AM
Aha thanks for that.

I actually ended up just initialising a QuickTips instance and then in my img tags made use of the 'ext' prefixed properties, e.g. ext:qtip and it all works a treat.

Thanks for pointing me in the right direction, top support as usual! :D