Multiple lines of text in extjs grid panel cell

Question

I have a gird. I want to display multiple lines in some grid cells. Following is the div that I am generating which has two lines of text. But this is not rendering the second line i.e. "test new line".

<div class="x-grid3-cell-inner x-grid3-col-event x-unselectable" style="height:134px;line-height:134px;" unselectable="on">
  <div>
      <a href="some link">XYZ funding round: Series C</a> (Funding Round)
      <br>
      test new line
  </div>
</div>

It is an extjs 3.4 grid.

Any idea why this would not render two lines?

Answer 1

I solved this problem with grid's viewConfig option:

viewConfig: {
    loadingText: lang.loading,
    loadMask: true,
    stripeRows: true,
    getRowClass: function(record, rowIndex, rowParams, store) {
        return 'multiline-row';
    }
},

and in the CSS file:

.multiline-row .x-grid-cell-inner {
    overflow: auto !important;
    white-space: normal !important;
    text-overflow: ellipsis;
    display: block;
}

And works fine in ExtJS 4.

Hope it helps.

Answer 2

For that column:

 renderer: function (value, metaData) {
                 return '<div style="white-space:normal">' + value + '</div>';
             }

Answer 3

I know it is not exactly what you are doing (generating markup with line break), but it serves similar purpose - displaying multiple lines in a single cell, by providing custom cell XTemplate. Here is the code: https://fiddle.sencha.com/#fiddle/5qd

EDIT: I added line break to first column, it also works but inner cell styles are not applied to every line.