Question

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

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

显示蔬菜类型。

使用textarea字段将项目发送到服务器，每个值以段落分隔，创建一种列表。

potatos
carrots
pumpkins

如果我用textarea编辑这些值，它们会显示在textarea中，格式与发送到服务器的格式相同（如列表）。

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

我看到两种方式：

您可以使用代码var owner = main_folder.getOwner(); Logger.log(owner.getEmail());。此标记按原样显示预格式化文本，包含所有空格和新行。（更多见这里：http://www.w3schools.com/tags/tag_pre.asp）。这里示例：https://fiddle.sencha.com/#fiddle/14il
您可以使用vegetables_types字符串创建字符串数组。这是我认为最好的方式。在它之后，你可以使用<pre>语句（看这里：http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.XTemplate）。这里示例：https://fiddle.sencha.com/#fiddle/14sa

在XTemplate中显示像textarea格式的值

2 个答案: