El proceso después de la cuadrícula se cargó completamente utilizando ExtJS

Question

Estoy usando ExtJS para cargar datos en una grilla, y quiero agregar algunos procesos adicionales después de que los datos se pusieron completamente en la grilla.

Mi contexto es que, después de poner los datos en la cuadrícula, verifico todas las filas, marco algunas de ellas como deshabilitadas en función de una condición específica y coloco la información sobre herramientas para remar (explique por qué está deshabilitado). Traté de usar 2 eventos: 'afterrender' de Grid y 'load' de la tienda de grid, pero no funcionaron.

Porque grid's 'afterrender' se activó durante la primera inicialización de la cuadrícula, no se refiere a la carga de datos. store's 'load' se activó cuando los datos se precapturaron para almacenar (no se procesaron en la pantalla), por lo que no puedo obtener la fila <div> para marcarla como deshabilitada.

Entonces, ¿qué evento se debe detectar cuando los datos se cargaron y se procesaron completamente en la cuadrícula? ¿Y cómo puedo implementar este requisito?

Answer 1

pienso para usted que la tarea no tenga que esperar hasta que se cargue parrilla, pero Prefiero usar viewConfig opción para el panel de cuadrícula para configurar cómo exactamente para mostrar sus filas:

viewConfig: { 
    getRowClass: function(r) { 
     if (r.get('disabled')) 
     return 'disabled-class'; 
     else 
     return ''; 
    } 
} 

Answer 2

¿Has probado viewready?

Ext.create('Ext.grid.Panel', { 
    // ... 
    viewConfig: { 
     listeners: { 
      viewready: function(view) { 
       // ... 
      } 
     } 
    } 
}); 

Answer 3

Utilice el éxito:. GetForm propiedad en load()() para llamar a una función de procesamiento para manejar la carga posterior

Answer 4

Si se utiliza la función setTimeout que obligará a la llamada a suceder después de la prestación ha terminado, que trabajaban en un caso que semejante tenía al tuyo.

listeners: { 
    'afterrender': function(grid) { 
      setTimeout(function(){ 
      // ... 

Answer 5

puede tocar en el evento de la tienda load directamente o retransmitir el evento a través de la red.

Dentro de la clase de cuadrícula, probablemente en la función initComponent, ponga la siguiente,

this.relayEvents(this.getStore(), [ 'load' ]); 

Answer 6

viewready trabajó para mí !!!

configurado como continuación en el controlador:

Ext.define('App.controller.Dashboard', { 
    extend: 'Ext.app.Controller', 
    init: function() { 
    this.control({ 
     '#summary-bottom-grid': { 
      viewready: function(cmp){ 
       var link = Ext.DomQuery.selectNode('span.summary-status',cmp.body.dom); 
      } 
      } 
    });  
    } 
} 

Answer 7

utilizo extjs 4.2.3 y esto funcionó.

He utilizado este:

this.grid = Ext.create('Ext.grid.Panel',{ 
    store: this.ds, 
    margins: '0 0 0 10', // top right button left 
    title: lng.menu.caption.mailHeaderGrid, 
    selType: 'checkboxmodel', 
    columns:[...], 
    selModel: { 
     renderer: function(value, metaData, record, rowIndex, colIndex, store, view) { 
      var baseCSSPrefix = Ext.baseCSSPrefix; 
      metaData.tdCls = baseCSSPrefix + 'grid-cell-special ' + baseCSSPrefix + 'grid-cell-row-checker'; 
      return (record.get('status') =='lng.label.surveyFinalized') ? '' : '<div class="' + baseCSSPrefix + 'grid-row-checker"> </div>'; 
     }, 
    }, 

Para mí funciona en Chrome!

https://www.sencha.com/forum/showthread.php?237641-How-to-hide-certain-checkbox-in-a-CheckboxSelectionModel

Answer 8

que darse cuenta de esto es una cuestión de edad, pero recientemente he tenido que solucionar un problema de desplazamiento en un (4.0.2) aplicación de edad ExtJS y necesitaba un disparador/evento para cuando html (por ejemplo <mesa> etiqueta) fue realmente actualizado/insertado en la vista de cuadrícula.

La siguiente secuencia de comandos agrega un nuevo evento de "actualización" a Ext.grid.View. El evento de actualización se activa después de que se haya insertado html en la vista.

(function(){ 
    var _setNewTemplate = Ext.grid.View.prototype.setNewTemplate; 
    Ext.override(Ext.grid.View, { 
     setNewTemplate: function(){ 

      _setNewTemplate.apply(this, arguments); 

      var view = this; 
      var template = this.tpl; 
      template.overwrite = function(el, values, returnElement){ 
       el = Ext.getDom(el); 
       el.innerHTML = template.applyTemplate(values); 
       view.fireEvent("update", view, el); //<--New Event! 
       return returnElement ? Ext.get(el.firstChild, true) : el.firstChild; 
      }; 

      template.doInsert = function(where, el, values, returnEl) { 
       el = Ext.getDom(el); 
       var newNode = Ext.core.DomHelper.insertHtml(where, el, template.applyTemplate(values)); 
       view.fireEvent("update", view, el); //<--New Event! 
       return returnEl ? Ext.get(newNode, true) : newNode; 
      } 

     } 
    }); 
})(); 

Para utilizar el nuevo evento, sólo tiene que añadir un nuevo detector de eventos a la vista de cuadrícula. Ejemplo:

paymentGrid.view.on("update", function(view, el){ //vs paymentGrid.store.on("load", ... 

    //do something... 
    console.log(el); 

}, this); 

Tenga en cuenta que esto se implementó utilizando ExtJS 4.0.2. Es posible que deba actualizar el script para su versión de ExtJS.

ACTUALIZACIÓN

me encontré con que el nuevo evento de "actualización" no estaba disparando cuando miras estaba convirtiendo en una tienda vacía. Como solución alternativa, extendí el método de actualización de la vista.

(function(){ 
    var _refresh = Ext.grid.View.prototype.refresh; 
    Ext.override(Ext.grid.View, { 
     refresh: function() { 
      _refresh.apply(this, arguments);     

      var view = this; 
      var el = view.getTargetEl(); 
      var records = view.store.getRange(); 

      if (records.length < 1) {      
       view.fireEvent("update", view, el); //<--New Event! 
      } 
     } 
    }); 
})();