I'm using ExtJS 4 and have a need to use sets of square brackets within XTemplate markup. This need arises from the fact that I require the square brackets to be preserved in the rendered output. More specifically, I'm dealing with object properties that contain a dash (minus sign) in their names, which requires one to use square brackets to access those properties' values in JavaScript, e.g.:
raw.cmsInstances[\'cms-thumb\'].url
Anyone who has worked with CSS in JavaScript has encountered this issue with dashes in CSS property names.
I haven't been able to find an alternate syntax (to the square bracket notation) that achieves the same result.
I have worked-around this limitation using an ExtJS custom object type. In particular, I am accessing ExtDirect's raw input and pushing values therefrom into the template markup using the following technique:
Ext.define('my.ux.file.IconBrowser', {
tpl: [
'<tpl for=".">',
//Am trying to use this notation, due to dash in property name:
//'<img src="{raw.cmsInstances[\'cms-thumb\'].url}"/>'
//But this causes XTemplate to evaluate whatever is between the square
//brackets.
(!Ext.isIE6? '<img src="{raw.cmsInstances.cmsThumb.url}"/>' :
'<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'{raw.cmsInstances.cmsThumb.url}\')"></div>'),
'</tpl>'
],
initComponent: function() {
Ext.data.Types.RAW = {
convert: function(v, data) {
return data.raw;
},
type: 'Raw'
};
var types = Ext.data.Types;
this.store = Ext.create('Ext.data.Store', {
proxy: {
type: 'direct',
directFn: this.loadLibraryApi,
paramOrder: ['instanceType'],
reader: {
root: 'data'
}
},
fields: [
{name: 'raw', type: types.RAW}
]
});
this.callParent(arguments);
}
});
I would much prefer to escape the square brackets or find an alternative to them that achieves the same result.
Thanks in advance!