[OPEN-771] List groupTpl does not account for spaces in id

[bwg]

Here's a patch

Ext.override(Ext.List, {
    groupTpl : [
        '<tpl for=".">',
            '<div class="x-list-group x-group-{[values.id.replace(" ", "-")]}">',
                '<h3 class="x-list-header">{group}</h3>',
                '<div class="x-list-group-items">',
                    '{items}',
                '</div>',
            '</div>',
        '</tpl>'
    ]
}); 

[jep]

I've ran into this, as well. But I'd suggest a slight modification to avoid other potential problems:

Ext.override(Ext.List, {
    groupTpl : [
        '<tpl for=".">',
            '<div class="x-list-group x-group-{[values.id.replace(/\\W/g, \"-\")]}">',
                '<h3 class="x-list-header">{group}</h3>',
                '<div class="x-list-group-items">',
                    '{items}',
                '</div>',
            '</div>',
        '</tpl>'
    ]
});

This scrubs any \W char to avoid various other ones that could cause problems with the html.

[jep]

Ugh. I can't actually get the above to work. No matter how many things I've tried to get the regexp in there to function, it just doesn't. I've even tried it with

new RegExp(\"\\W\", \"g\")

and that bombed, too. Something about how the XTemplate code reads in that function is getting in the way and I can't figure out how to make it like it. You can do it as a user function

var rateGroupTpl = new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="x-list-group x-group-{[this.makeId(values.id)]}">',
                '<h3 class="x-list-header">{group}</h3>',
                '<div class="x-list-group-items">',
                    '{items}',
                '</div>',
            '</div>',
        '</tpl>',
  {
    makeId:function (id) {
      return id.replace(/\W/g, "-");
    }
  }
);

Unfortunately, List doesn't really like having XTemplate instances for the groupTpl property, though. I have a fix for that here, though. Maybe both fixes together could make it into a future version.