extjs - los encabezados de columna y los datos de fila no están alineados

Question

Tengo un panel de red y 5 columnas en eso. El problema es que los encabezados de columna y los datos de fila no están alineados. Creo que es solo el problema en mi proyecto solo cuando creo un ejemplo con el mismo código y todo funciona bien. Compruebe la siguiente imagen:

Puede alguien sugerir lo que podría ser el problema?

Answer 1

Por favor, solicite a continuación css según los requisitos.

1) para la personalización de específico ExtJS GridPanel, aplicar por debajo de css:

#testgrid_id table caption,table th,table td {  
padding : 0px !important; 
margin : 0px !important; 
} 

Nota: Aquí, por encima de "#testgrid_id" es la ID de cuadrícula específica Panel.

2) Para la aplicación a todos los GridPanels ExtJS, aplicar por debajo de css:

table caption,table th,table td {  
padding : 0px !important; 
margin : 0px !important; 
} 

Gracias!

Answer 2

Tengo este error usando GXT 2.2.5 (versión de Chrome 26.0.1410.43m).

Solución:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    .x-grid3-row td.x-grid3-cell 
    { 
     box-sizing: border-box; 
    } 
} 

Nota, si su CSS contiene algo como:

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

remota ella.

Answer 3

En realidad descubrí que la mayoría de las veces, la cuadrícula está debajo de algún panel. tanto, el problema real es con esta clase

.x-grid-cell-inner 
    { 
     overflow: hidden; 
     padding: 2px 6px 3px; 
     **text-overflow: ellipsis; 
     white-space:nowrap;** 

    } 

Esto es debido a que el ancho de la o

<td class=" x-grid-cell x-grid-cell-gridcolumn-1099 "><div class="x-grid-cell-inner "></div></td> 

no quede ajustado. Haciendo que Div desborde las columnas y arruine toda la alineación de la grilla.

Probablemente porque he anidado el GridPanel en otro panel O un expansor de fila en mi caso o bajo algún diálogo modal o lo que sea que esté causando que la configuración no tenga lugar.

A Solución rápida.

**white-space:normal;** 

Hará el truco y exprimirá el contenido en la columna. Sin embargo, no aplica las elipses por lo que es un poco molesto si el contenido es largo, no está oculto con "..."

Voy a tratar de encontrar otra solución que lo haga, pero adivinen qué, hora de implementar esto en el servidor!

espero que esto ayude a alguien

Answer 4

que tenía exactamente el mismo problema.

Para mí, el problema era que estaba configurando identificadores de HTML en los encabezados de mis columnas.ExtJS luego agrega cosas graciosas a la ID, como titleEl, textEl, triggerEL.

Ej:

<div id="myPackageGridId1-titleEl" class="x-column-header-inner"> 

Esto debe de alguna manera arruinar el oyente columna.

Solución: use clase en su lugar.

Answer 5

En mi caso (GXT 2.2.1) He arreglado el problema subclasificando GridView, anulando getColumnStyle, y el establecimiento adj a 0:

import com.extjs.gxt.ui.client.GXT; 
import com.extjs.gxt.ui.client.Style; 
import com.extjs.gxt.ui.client.widget.grid.GridView; 

public class GridViewBugFix extends GridView { 

    private boolean fixHeaderDisplacement = true; 

    public GridViewBugFix() { 
     super(); 
    } 

    @Override 
    protected String getColumnStyle(int colIndex, boolean isHeader) { 
     String style = !isHeader ? cm.getColumnStyle(colIndex) : ""; 
     if (style == null) { 
      style = ""; 
     } 

     int adj = GXT.isWebKit ? 2 : 0; 
     if (fixHeaderDisplacement) adj = 0; 

     style += "width:" + (getColumnWidth(colIndex) + adj) + "px;"; 
     if (cm.isHidden(colIndex)) { 
      style += "display:none;"; 
     } 
     Style.HorizontalAlignment align = cm.getColumnAlignment(colIndex); 
     if (align != null) { 
      style += "text-align:" + align.name() + ";"; 
     } 
     return style; 
    } 
}