Question

我的商店记录有一些特殊字符如下

var

但是当它显示在UI上时（使用XTemplate），特殊字符不会显示，甚至不会应用。他们只是被丢弃了。

// XTemplate

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

Answer 1

这是因为换行符不是html，需要以某种方式转换为等效的html <br/>。

因此，对于字符串，您可以转换这样的新行：

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

感谢使者，ExtJS中有一个built in函数可转换为<br />：

Ext.util.Format.nl2br(value)

Here是一个使用dataview的工作示例的小提琴，下面是相应的代码：

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'
            }]
        });

我console.log更改，这正在用<br />替换新行。

ExtJS：Xtemplate无法识别/ n / r之类的特殊字符

1 个答案: