1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    4
    Vote Rating
    0
    lordzardeck is on a distinguished road

      0  

    Default extjs grid column text wrap around/auto expand

    extjs grid column text wrap around/auto expand


    I'm trying to create a property grid with ExtJS. The problem I'm having is that the text is too wide for the column. Is there anyway to force text to wrap around and just create a taller row? Here's what I have so far: http://jsfiddle.net/lordzardeck/pLYt3/1/Basically i'd like the title row to expand to read this:


    A Reason for Spelling (Level B ):
    Teacher's Guidebook

    is this possible? if so, how?

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,080
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Have a look at customRenderers:
    http://docs.sencha.com/ext-js/4-0/#!...ustomRenderers

    additional: (untested)
    http://www.sencha.com/forum/showthread.php?122290

    Regards,
    Scott.

  3. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    4
    Vote Rating
    0
    lordzardeck is on a distinguished road

      0  

    Default


    actually, this worked fine:


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

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,080
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Very nice .. good job.

    Scott.

  5. #5
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    105
    Vote Rating
    32
    jptrainor will become famous soon enough jptrainor will become famous soon enough

      0  

    Default documentation

    documentation


    ... about x-grid-cell-inner

    I'm trying solve the same problem and google brought me to this thread.

    I didn't see this particular style in the 4.2.0 docs. I did it see when I grep'ed around in the code.

    Is there a "start here" document that describes best practices for customizing Ext css. I didn't find anything in the docs other than the individual css styles for each component.

    thanks

  6. #6
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    105
    Vote Rating
    32
    jptrainor will become famous soon enough jptrainor will become famous soon enough

      0  

    Default


    I was hoping to override this as part of theme using 4.2.0.

    I tracked it down to:
    Table.scss:
    #{$prefix}grid-cell-inner {
    overflow: hidden;


    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;


    line-height: $grid-row-cell-line-height;
    padding: $grid-cell-inner-padding;


    white-space: nowrap;
    }

    It would be nice if there was a sass variable controlling overflow of grid cells.