¿Cómo ocultar filas en ExtJS GridPanel?

Question

Supongamos que sé qué índice de fila apuntar (con this.rowToBeDeleted tiene un valor de 2, por ejemplo), cómo puedo ocultar esta fila solo de la cuadrícula pero no de la tienda (tengo una bandera en la tienda, que indica qué filas deberían eliminarse de la base de datos más adelante en mi código PHP de servicio web).

Answer 1

Puede utilizar uno de los métodos store.filter() o puede ocultar el elemento de fila.

grid.getView().getRow(rowIndex).style.display = 'none'; 

Creo que es mucho mejor, aunque sólo quitar el registro de la tienda y dejar que la tienda de actualizar la vista desde el que va a eliminar el registro y no sólo ocultarlo. Con la tienda en modo por lotes (valor predeterminado: lote: verdadero, tranquilo: falso), recordará qué filas ha eliminado y no lanzará una solicitud al servidor hasta que llame al store.save().

Answer 2

Puede usar los métodos store.filter() o store.filterBy() para eso.

Establezca una propiedad "oculta" en sus registros y el filtro, por ejemplo, todos los registros que se hayan ocultado como verdaderos. De esta forma, seguirán presentes en la tienda pero no estarán visibles en la cuadrícula.

Answer 3

sugiere emplear store.FilterBy() y pasar una función para probar el valor del valor de rowToBedeleted:

store.filterBy(function(record) { 
    return record.get("rowToBeDeleted") != 2; 
}); 

me escribió una entrada de blog básica sobre gridfiltering hace un tiempo, se puede leer aquí: http://aboutfrontend.com/extjs/extjs-grid-filter/

Answer 4

En ExtJS 4.1, no hay view.getRow(..). En su lugar puede utilizar:

this.view.addRowCls(index, 'hidden'); 

para ocultar la fila en el índice especificado, y

this.view.removeRowCls(index, 'hidden'); 

mostrarlo (donde 'esto' es la red).

clase CSS hidden se define como

.hidden, 
{ 
    display: none; 
} 

Esto es útil para scenarious peculiar donde store.filterBy() no es apropiado.

Answer 5

En el archivo js de la cuadrícula, escriba el código siguiente para aplicar un CSS a las filas que desea ocultar.

<pre><code> 
    Ext.define('MyGrid',{ 
    extend : 'Ext.grid.Panel', 
    xtype : ''mygrid', 
    viewConfig : { 
     getRowClass : function(record,id){ 
      if(record.get('rowToBeDeleted') == 2){ 
      return 'hide-row'; 
      } 
     } 
    }, 
    ................. 
    ................. 
    }); 
</code></pre> 

Ahora definir un CSS personalizado en el archivo custom.css:

.hide-row{display:none} 

Esto ocultará filas en red sin quitar o filtrar desde la tienda.