processus après grille a été chargée complètement en utilisant ExtJS

Question

J'utilise ExtJS pour charger des données sur une grille, et je veux ajouter quelques processus supplémentaires après que les données ont été mis complètement sur la grille. Mon contexte est, après que les données ont été mises sur la grille, je vais vérifier toutes les lignes, et marquer certaines d'entre elles comme désactivées en fonction d'une condition spécifiée et mettre une info-bulle à la ligne (expliquer pourquoi elle est désactivée). J'ai essayé d'utiliser 2 événements: 'afterrender' de Grid, et 'load' du magasin de la grille, mais ils n'ont pas fonctionné.

Parce que lors de la première initialisation de la grille a été tiré grid's 'afterrender', sans souci de chargement de données. store's 'load' a été déclenché lorsque les données étaient préremplies à stocker (pas de rendu à l'écran). Par conséquent, je ne peux pas obtenir la ligne <div> comme style désactivé.

Alors, quel est l'événement pour détecter le moment où les données ont été chargées et rendues complètement sur la grille? Et comment puis-je mettre en œuvre cette exigence?

Answer 1

Je pense que pour vous la tâche que vous n'avez pas besoin d'attendre jusqu'à ce que la grille est chargée mais plutôt utiliser l'option viewConfig pour le panneau de la grille pour configurer exactement pour afficher vos lignes:

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

Answer 2

Avez-vous essayé viewready?

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

Answer 3

Utilisez le succès. Propriété sur getForm() load() pour appeler une fonction pour gérer le traitement post de charge

Answer 4

Si vous utilisez la fonction setTimeout il forcera l'appel à se produire après le rendu a terminé, il a travaillé dans un cas similaire I eu à la vôtre.

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

Answer 5

Vous pouvez puiser dans l'événement load du magasin directement, ou relayer l'événement à travers la grille.

A l'intérieur de la classe de grille, probablement dans la fonction initComponent, mettez ce qui suit,

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

Answer 6

viewready a fonctionné pour moi !!!

comme ci-dessous dans Configuré contrôleur:

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

J'utilise ExtJS 4.2.3 et cela a fonctionné.

J'utilisé ceci:

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>'; 
     }, 
    }, 

Pour moi, fonctionne sur le chrome!

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

Answer 8

Je me rends compte que c'est une vieille question, mais j'ai eu récemment corriger un problème de défilement dans une ancienne application ExtJS (4.0.2) et je besoin d'un déclencheur/événement lorsque html (par exemple <tableau> tag) a été réellement mis à jour/inséré dans la vue de la grille.

Le script suivant ajoute un nouvel événement « mise à jour » à Ext.grid.View. L'événement de mise à jour est déclenché après l'insertion de html dans la vue.Pour utiliser le nouvel événement, vous ajoutez simplement un nouvel écouteur d'événement à la vue de la grille. Exemple:

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

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

}, this); 

Notez que cela a été implémenté en utilisant ExtJS 4.0.2. Vous devrez peut-être mettre à jour le script pour votre version d'ExtJS.

MISE À JOUR

Je trouve que le nouvel événement « mise à jour » n'a pas été mise à feu lorsqu'une vue a été rendu d'un magasin vide. Pour contourner ce problème, j'ai étendu la méthode d'actualisation de la vue.

(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! 
      } 
     } 
    }); 
})();