1. #1
    Ext JS Premium Member
    Join Date
    Oct 2007
    Posts
    93
    Vote Rating
    2
    richardtallent is on a distinguished road

      0  

    Lightbulb Solution: word-wrap grid cell via column definition

    Solution: word-wrap grid cell via column definition


    (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?

    Code:
    .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

  2. #2
    Ext JS Premium Member
    Join Date
    Apr 2007
    Posts
    295
    Vote Rating
    9
    jheid will become famous soon enough

      0  

    Default


    You can also implement a renderer on that col:

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

Thread Participants: 1