I am trying to format a value in a display field to be a clickable telephone number. it all seems to work fine the very first time this form is displayed.
But when a new model is loaded and the form redisplays all of my anchor tags and icons just disappear and the phone number is just displayed as a plain old number.
Code:
/*global Ext,Coda,U4*/
Ext.util.Format.url = function(value) {
var url = U4.util.Path.encodeSegments(Coda.telephoneUrlFormat, {
number: value.replace(/ /g,'')
});
var imagePath,
iconTag,
classTag;
if(Ext.isEmpty(value)){
return "";
}
else {
imagePath = Coda.imagePath + 'icon/phone.png';
iconTag = '<IMG SRC=\"'+ imagePath+'\">';
classTag = 'class="'+Coda.baseCSSPrefix+'link-anchor"';
return '<A href=\"' + url + '\" ' + classTag + '>'+iconTag + Ext.htmlEncode(value) + '</A>';
}
};
/**
* A display field which formats values using a Coda Type.
*/
Ext.define('Coda.form.field.LinkDisplay', {
extend : 'Coda.form.field.Display',
alias : 'widget.coda_linkfield',
requires : ['Coda.web.Types'],
fieldSubTpl: [
'<div id="{id}"',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
' class="{fieldCls}">{value:url}</div>',
{
compiled: true,
disableFormats: false
}
]
});
.
I have done some digging and it is this method from 'Ext.form.field.Display' that does the splatting.
Why isn't my tpl ever looked at again? (had a break point in the format method)
Code:
setRawValue: function(value) {
var me = this,
display;
value = Ext.value(value, '');
me.rawValue = value;
if (me.rendered) {
me.inputEl.dom.innerHTML = me.getDisplayValue(); <-- this line here
}
return value;
},