Multiple lines of text in an extjs grid panel cell

Question

I have a chip. I want to display multiple rows in some grid cells. Below is the div that I am generating that has two lines of text. But this does not make the second line, that is, "test a 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>

This is the extjs 3.4 mesh.

Any idea why this is not outputting two lines?

Answer 1

I solved this problem with the grid 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 great in ExtJS 4.

Hope this helps.

Answer 2

, , ( ), - XTemplate. : https://fiddle.sencha.com/#fiddle/5qd

EDIT: , , .

Answer 3

For this column:

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