display values in XTemplate like textarea format

3
votes

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

2
javascriptextjsextjs5

2 Answers

2
votes

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

I see two ways:

  1. You can use tag <pre>. This tag shows preformatted text as is, with all spaces and new lines. (more see here: http://www.w3schools.com/tags/tag_pre.asp ). Here sample: https://fiddle.sencha.com/#fiddle/14il

  2. You can make string array from vegetables_types string. It's best way I think. After it, you could use <tpl for="vegetables_type"> statement (look here: http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.XTemplate ). Here sample: https://fiddle.sencha.com/#fiddle/14sa