Celdas de cuadrícula Word-wrap en Ext JS

Question

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

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

Por desgracia, los elementos TD contienen un elemento DIV envolver el contenido, y que DIV se establece en white-space:nowrap por hoja de estilo de Ext JS, así anulando el CSS TD no es bueno.

que añade lo siguiente a mi archivo CSS principal, una solución simple que aparece para no romper ninguna funcionalidad parrilla, pero permite a cualquier entorno white-space aplico al TD pase a través de la 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; 
    } 

tu caso es distinto, pero funciona para mí, quería conseguirlo por ahí como una solución, ya que no pude encontrar una solución de trabajo buscando en el Interwebs.

Answer 1

No es una "mejor solución", pero una similar. Recientemente necesité permitir que TODAS las celdas en cada cuadrícula se envuelvan. He utilizado una solución basada en CSS similar (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é con el establecimiento de un estilo en el TD, sólo fue a la derecha para la clase de células.

Answer 2

Si sólo desea aplicar la envoltura a una columna, se puede añadir un intérprete personalizado.

Aquí es la función de añadir:

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

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

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

Answer 3

Si sólo desea ajustar el texto en ciertas columnas y está usando ExtJS 4, se puede especificar una clase CSS para las celdas de una columna:

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

Y en y nuestro archivo CSS:

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

Answer 4

Otra solución es que:

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

Answer 5

La mejor manera de hacerlo es mediante el establecimiento de la verdad como cellWrap a continuación.

cellWrap: verdadera

Su trabajo bien en ExtJs 5.0.

Answer 6

uso

cellWrap: true 

Si aún desea utilizar css siempre tratar de trabajar con la interfaz de usuario, variables, etc., dentro de los temas, o establecer el estilo con la propiedad de estilo.