在 XTemplate 中显示值，如 textarea 格式

Question

我正在使用带有以下模板的插件 rowexpander（网格）。

rowBodyTpl: new Ext.XTemplate('<div>'+
    '<div>'+
        '<b>Vegetables:</b>'+
        '<ul><li>{vegetables_types}</li></ul>'+
    '</div>'+
'</div>')

显示蔬菜种类。

项目通过文本区域字段发送到服务器，每个值由段落分隔，创建一种列表。

potatos
carrots
pumpkins

如果我使用文本区域编辑这些值，它们将以发送到服务器的相同格式（如列表）显示在文本区域中。

但是，使用 XTemplate 我只能在一行中显示它们。

potatos carrots pumpkins

我将不胜感激解决问题的建议

编辑：2016 年 1 月 2 日

FIDDLE: https://fiddle.sencha.com/#fiddle/14se

FIDDLE（已解决）：https://fiddle.sencha.com/#fiddle/14sf

Answer 1

XTemplate 创建 HTML，而文本区域使用格式化的纯文本。

HTML 仅将代码中的换行符显示为单个 space。 HTML 换行符使用 <br> 标记。

因此您必须在模板中将 \n 替换为 <br> 才能显示换行符：

    var rowBodyTpl = new Ext.XTemplate([
      '<div>',
      '<div style = "white-space: pre-wrap;">',
      '<b>Vegetables:{[this.replaceBR(values.vegetables_types)]}</b>',
      '</div>',
      '</div>',
        {
            replaceBR:function(text) {
                return text.replace(/\n/g,'<br>');
            } 
        }
    ]);

Answer 2

我看到两种方式：

您可以使用标签 <pre>。此标记按原样显示预格式化的文本，其中包含所有空格和换行符。（更多见这里：http://www.w3schools.com/tags/tag_pre.asp ). Here sample: https://fiddle.sencha.com/#fiddle/14il
您可以从 vegetables_types 字符串创建字符串数组。这是我认为最好的方式。之后，您可以使用 <tpl for="vegetables_type"> 语句（看这里：http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.XTemplate ). Here sample: https://fiddle.sencha.com/#fiddle/14sa

在 XTemplate 中显示值，如 textarea 格式

display values in XTemplate like textarea format

javascript

extjs

extjs5