以 XTemplate 显示值，如文本区域格式

Question

我正在使用带有以下模板的插件行扩展器（网格）。

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

显示蔬菜类型。

项目被发送到服务器，其中包含一个文本区域字段，每个值由段落分隔，从而创建一种列表。

potatos
carrots
pumpkins

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

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

potatos carrots pumpkins

我将不胜感激解决的建议

编辑：01-02-2016

小提琴：https://fiddle.sencha.com/#fiddle/14se

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

Answer 1

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

HTML 确实仅将代码中的换行符显示为单个空格。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

我看到两种方式：

1. 您可以使用标记<pre> 。此标记按原样显示预先格式化的文本，包括所有空格和新行。（更多见这里：http://www.w3schools.com/tags/tag_pre.asp）。此处示例：https://fiddle.sencha.com/#fiddle/14il

2. 您可以从vegetables_types字符串中制作字符串数组。我认为这是最好的方式。在它之后，您可以使用<tpl for="vegetables_type">语句（看这里：http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.XTemplate）。此处示例：https://fiddle.sencha.com/#fiddle/14sa