title: Escape square brackets in ExtJS template markup (XTemplate)?
body: <p>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.:</p>
  
  <p><code>raw.cmsInstances[\'cms-thumb\'].url</code></p>
  
  <p>Anyone who has worked with CSS in JavaScript has encountered this issue with dashes in CSS property names.</p>
  
  <p>I haven't been able to find an alternate syntax (to the square bracket notation) that achieves the same result.</p>
  
  <p>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:</p>
  
  <pre><code>Ext.define('my.ux.file.IconBrowser', {
      tpl: [
          '&lt;tpl for="."&gt;',
              //Am trying to use this notation, due to dash in property name:
              //'&lt;img src="{raw.cmsInstances[\'cms-thumb\'].url}"/&gt;'
              //But this causes XTemplate to evaluate whatever is between the square
              //brackets.
  
              (!Ext.isIE6? '&lt;img src="{raw.cmsInstances.cmsThumb.url}"/&gt;' : 
              '&lt;div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'{raw.cmsInstances.cmsThumb.url}\')"&gt;&lt;/div&gt;'),
          '&lt;/tpl&gt;'
      ],
      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);
      }
  });
  </code></pre>
  
  <p>I would much prefer to escape the square brackets or find an alternative to them that achieves the same result.</p>
  
  <p>Thanks in advance!</p>