1

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!

Ben Johnson
  • 2,507
  • 3
  • 29
  • 29
  • The problem is not in escaping, it's just XTemplate doesn't support this object notation at the moment. I've opened a feature request ticket for this. – Alex Tokarev Mar 13 '13 at 18:30
  • Thanks, Alex. Are you able to provide a URL to the request that you opened? – Ben Johnson Mar 13 '13 at 18:48
  • Unfortunately we don't have public access to our bug tracker at the moment so I can't give you the URL. – Alex Tokarev Mar 13 '13 at 19:02
  • 1
    Understood. If you are able to update your response with a URL at a future time, that would be appreciated. I would like to monitor the issue so that I know if and when it is implemented. – Ben Johnson Mar 13 '13 at 20:51
  • Not sure if I can do that, actually. It seems that we're not providing public access on purpose, it's a matter of company policy. Sorry about that. – Alex Tokarev Mar 13 '13 at 21:26

0 Answers0