Replace newlines with p tags in ExtJS DataView

Another fun usage of XTemplate with an assist from DataView’s prepareData function, let’s wrap each paragraph separated by two newlines in actual paragraph tags instead of using Ext.util.Format’s nl2br function, as BR tags cannot be styled.

var config = {
  xtype:'dataview',
  singleSelect:true,
  autoScroll:true,
  cls:'custom',
  overClass:'x-view-over',
  itemSelector:'div.wrap',
  prepareData:function(recordData, ri, record) {
    recordData.message = recordData.message.split(/\n{2,2}/);
    return recordData;
  },
  tpl:new Ext.XTemplate(
    '<tpl for=".">',
    '<div class="wrap">',
    '<blockquote>',
      '<tpl for="message"><p>{.}</p></tpl>',
    '</blockquote>',
    '<cite>',
    '<span class="author">&mdash; {author}</span> @ <span class="date">{when}</span>',
    '</cite>',
    '<div class="x-clear"></div>',
    '</div>',
    '</tpl>',
    '<div class="x-clear"></div>')
};

Above, I replace the message property’s value with an array split on the expression above. Then, I can use utilize a child template and XTemplate’s magic dot operator when looping over the message property array. Now, I have nicely wrapped text I can easily style instead of a bunch of double BR tags.

Post a Comment

Your email is never shared. Required fields are marked *

*
*