Solution: word-wrap grid cell via column definition

[richardtallent]

(Using 3.1.0)

My app creates column definitions dynamically, and I need values in some columns to be word-wrapped. So, I can't just put all sorts of specific column IDs in my CSS file, because the columns are only known at runtime.

I tried adding "css: 'white-space:normal;'" to the column definitions, but that isn't working because it only applies the inline CSS to the TD, not the inner DIV.

I added the following to my main CSS file to allow the "css" config parameter to cascade white-space settings to the DIV properly. It works, but are there any unintended consequences I should worry about with other grid functionality?

.x-grid3-cell {
	/* TD is defaulted to word-wrap. Turn it off so it can be turned on for specific columns. */
	white-space:nowrap;
	}

.x-grid3-cell-inner {
	/* Inherit DIV's white-space from TD parent, since DIV's inline style is not accessible in the column definition. */
	white-space:inherit;
	}

If overriding is such a popular request and it doesn't cause problems with other grid functionality, could this be implemented as the default?

Cross-post:

http://stackoverflow.com/questions/2...ells-in-ext-js

[jheid]

You can also implement a renderer on that col:

renderer: function (value, meta) {
       meta.attr = 'style="white-space:normal"';
       return value;
       }