Display Values In XTemplate Like Textarea Format
Solution 1:
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>');
}
}
]);
Solution 2:
I see two ways:
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/14ilYou 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
Post a Comment for "Display Values In XTemplate Like Textarea Format"