在XTemplate中显示如textarea格式的值 [英] display values in XTemplate like textarea format

问题描述

  rowBodyTpl：new Ext.XTemplate（'< ; div>'+ 
'< div>'+ 
'< b>蔬菜：< / b>'+ 
'< ul>< li> {vegetables_types} < / li>< / ul>'+ 
'< / div>'+ 
'< / div>'）
  

显示蔬菜类型。

项目将发送到带有textarea字段的服务器，每个值由段落分隔，创建一个列表。

  potatos 
胡萝卜
南瓜
  

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

但是，使用XTemplate我可以在单行显示。

  potatos胡萝卜南瓜
  

o解决

编辑：01-02-2016

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

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

解决方案

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

HTML只会将代码中的换行符显示为单个空格。 HTML换行使用< br> 标签进行。

所以你必须替换 \\\
与您的模板中的< br> 分行显示：

  var rowBodyTpl = new Ext.XTemplate（[
'< div>'，
'< div style =white-space：pre -wrap;>'，
'< b>蔬菜：{[this.replaceBR（values.vegetables_types）]}< / b>'，
'< / div> 
'< / div>'，
 {
 replaceBR：function（text）{
 return text.replace（/ \\\
 / g，'< br& ）; 
} 
} 
]）; 
  

I am using the plugin rowexpander (grid) with the following template.

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

Displays vegetables types.

Items are sent to the server with a textarea field with each value separated by paragraph, creating a sort of list.

potatos
carrots
pumpkins

If I edit these values with a textarea, they are displayed in the textarea with the same format they were sent to the server (like a list).

However, with the XTemplate I just can display them on a single line.

potatos carrots pumpkins

I would appreciate suggestions to solve

EDIT:01-02-2016

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

FIDDLE (solved): https://fiddle.sencha.com/#fiddle/14sf

解决方案

The XTemplate creates HTML, while the text area uses formatted plain text.

HTML does show line breaks from the code as a single space only. HTML line breaks are made using <br> tag.

So you have to replace \n with <br> in your template for the line breaks to show up:

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

这篇关于在XTemplate中显示如textarea格式的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！