ExtJS: Xtemplate doesn't recognize special characters like /n /r

Question

My store record has some special characters as follows

name: "Hi \r\n\r\n Location Name: Hello\r\n\r\n"

But when it is displayed on UI (using XTemplate), the special characters are not displayed but not even applied. They are just discarded.

//XTemplate

    var cars_template = new Ext.XTemplate(
'<tpl =".">',
'<div class="cars-item">',                 
'<li>',
'<span>Name: </span><span>{[this.updateHtml(values.name)]}</span>',
'</li>',
'</div></tpl>',
{
  updateHtml: function(value){
    if(value){
      value = value.replace(/(?:\r\n|\r|\n)/g, '<br/>');            
    }
    return value;
  }
}

); 

Answer 1

That is because the newlines are not html, they need to be converted to their html equivalent <br/> one way or another.

So for a string you could convert new lines like this:

var myString = 'Hi \r\n\r\n Location Name: Hello\r\n\r\n';
myString = myString.replace(/(?:\r\n|\r|\n)/g, '<br/>');

Thanks to Emissary, there is a built in function in ExtJS to convert to <br />:

Ext.util.Format.nl2br(value)

Here is a sencha fiddle with a working example to a dataview and below is the corresponding code:

var s = Ext.create('Ext.data.Store', {
            fields: ['name'],
            data: [{
                name: "Hi \r\n\r\n Location Name: Hello\r\n\r\n"
            }, {
                name: "Hi \r\n\r\n A Test Here: Another Test\r\n\r\n"
            }]
        });
        Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            title: 'Example Replacement',
            layout: 'fit',
            items: [{
                xtype:'dataview',
                store: s,
                tpl: [
                '<tpl for=".">', 
                '<div class="cars-item">', 
                '<li>', 
                '<span>Name: </span><span>{[this.updateHtml(values.name)]}</span>', 
                '</li>', 
                '</div>',
                '</tpl>', 
                {
                    updateHtml: function(value) {
                        console.log(value);
                        if (value) {
                            value = value.replace(/(?:\r\n|\r|\n)/g, '<br/>');
                        }
                        console.log(value);
                        return value;
                    }
                }
                ],
                multiSelect: true,
                height: 310,
                trackOver: true,
                itemSelector: '.cars-item',
                emptyText: 'Nothing to display'
            }]
        });

I console.log the change and this is replacing new lines with <br />.