Word-wrap grid cells in Ext JS

Question

(This is not a question per se, I\'m documenting a solution I found using Ext JS 3.1.0. But, feel free to answer if you know of a better solution!)

The Colu

Answer 1

Not a "better solution", but a similar one. I recently needed to allow ALL cells in every grid to wrap. I used a similar CSS-based fix (this was for Ext JS 2.2.1):

.x-grid3-cell-inner, .x-grid3-hd-inner {
  white-space: normal; /* changed from nowrap */
}

I didn't bother with setting a style on the td, I just went right for the cell class.

Answer 2

The best way to do is by setting the cellWrap to true as below.

cellWrap: true

Its working well in EXTJS 5.0.

Answer 3

If you only want to apply the wrapping to one column, you can add a custom renderer.

Here is the function to add:

function columnWrap(val){
    return '<div style="white-space:normal !important;">'+ val +'</div>';
}

Then add the renderer: columnWrap to each column you want to wrap

new Ext.grid.GridPanel({
[...],
columns:[{   
     id: 'someID',
     header: "someHeader",
     dataIndex: 'someID',
     hidden: false,
     sortable: true,
     renderer: columnWrap           
}]

Answer 4

If you only want to wrap text in certain columns and are using ExtJS 4, you can specify a CSS class for the cells in a column:

{
    text: 'My Column',
    dataIndex: 'data',
    tdCls: 'wrap'
}

And in your CSS file:

.wrap .x-grid-cell-inner {
    white-space: normal;
}

Answer 5

Other solution is that:

columns : [
    {
        header: 'Header',
        dataIndex : 'text',
        renderer: function(value, metaData, record, rowIndex, colIndex, view) {
            metaData.style = "white-space: normal;";
            return value;
        }
    }
]

Answer 6

use

cellWrap: true

If you still want to use css always try to work with ui's, variables, etc. within themes, or set the style with the style property.