ExtJS 6 : Multiline cell within a grid

In one app, some messages were displayed into a grid, quite a common stuff.
However, long messages were stripped and I needed to display the whole message.

Here is the approach:
1) Add the following style to your css/scss

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

2) Define a rendered for the multiline cell. For example, here is my column declaration ( I prefer to use a span instead of a div )

, columns: [
        {
            xtype: 'gridcolumn', align: 'left'
            , dataIndex: 'message_content', flex: 3, text: 'Msg'
            , renderer: function (value, metaData, record, rowIndex) {
                return '' + value + '';
        }
]

And that’s pretty all!

Leave a comment