extjs - Celdas de cuadrícula de Word-wrap en Ext JS

grid

Question

(Esta no es una pregunta per se, estoy documentando una solución que encontré utilizando Ext JS 3.1.0. ¡Pero no dude en responder si conoce una solución mejor!)

La configuración de columna para un objeto Ext JS Grid no tiene una forma nativa de permitir texto envuelto por palabras, pero hay una propiedad css para anular el CSS en línea de los elementos TD creados por la cuadrícula.

Desafortunadamente, los elementos TD contienen un elemento DIV que envuelve el contenido, y ese DIV está configurado en white-space:nowrap en white-space:nowrap por la hoja de estilo de Ext JS, por lo que anular el TD CSS no sirve.

Agregué lo siguiente a mi archivo CSS principal, una solución simple que parece no romper ninguna funcionalidad de la grilla, pero permite que cualquier configuración de white-space que aplique al TD pase a DIV .

.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;
    }

YMMV, pero me funciona, quería sacarlo como una solución ya que no podía encontrar una solución de trabajo buscando en Interwebs.

Answer 1

La mejor forma de hacerlo es configurando cellWrap en true de la siguiente manera.

CellWrap: cierto

Funciona bien en EXTJS 5.0.

Answer 2

No es una "mejor solución", sino una similar. Recientemente necesité permitir que TODAS las celdas en cada cuadrícula se envuelvan. Usé una corrección similar basada en CSS (esto fue para Ext JS 2.2.1):

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

No me molesté en establecer un estilo en la td, solo fui directo a la clase celular.

Answer 3

Otra solución es eso:

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

Answer 4

Si solo desea ajustar texto en ciertas columnas y está utilizando ExtJS 4, puede especificar una clase CSS para las celdas de una columna:

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

Y en tu archivo CSS:

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

Answer 5

Si solo desea aplicar el ajuste a una columna, puede agregar un renderizador personalizado.

Aquí está la función para agregar:

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

A continuación, agregue el renderer: columnWrap a cada columna que desee envolver

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

Answer 6

utilizar

cellWrap: true

Si aún desea usar css, intente siempre trabajar con ui''s, variables, etc. dentro de los temas, o configure el estilo con la propiedad de estilo.