Proces po siatce został całkowicie załadowany za pomocą ExtJS

Question

Używam ExtJS do ładowania danych do siatki, i chcę dodać kilka dodatkowych procesów po całkowitym wprowadzeniu danych do siatki.

Mój kontekst polega na tym, że po umieszczeniu danych w siatce sprawdzę wszystkie wiersze i zaznaczę niektóre z nich jako wyłączone na podstawie określonego warunku i wstawię podpowiedź do wiersza (wyjaśnij, dlaczego jest wyłączona). Próbowałem użyć 2 zdarzeń: "afterrender" w Grid i "load" w siatce, ale nie zadziałały.

Ponieważ grid's 'afterrender' został uruchomiony przy pierwszej inicjalizacji sieci, nie dotyczy ładowania danych. store's 'load' został uruchomiony, gdy dane zostały zapisane do pobrania (nie wyświetlają się na ekranie), więc nie mogę uzyskać wiersza <div>, aby ustawić go jako wyłączony.

Co to jest zdarzenie, aby wykryć, kiedy dane zostały załadowane i renderowane całkowicie na siatce? I jak mogę wdrożyć to wymaganie?

Answer 1

myślę dla ciebie zadanie, które nie muszą czekać, aż siatka jest załadowany, ale raczej używać viewConfig opcję na panelu siatki do konfigurowania jak dokładnie wyświetlanie wierszy:

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

Answer 2

Czy próbowałeś już viewready?

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

Answer 3

Użyj sukces. Nieruchomości na getForm() load(), aby wywołać funkcję obsługiwać przetwarzanie obciążenie po

Answer 4

w przypadku korzystania z funkcji setTimeout wymusi połączenie wydarzy po renderingu się zakończy, to działało w podobny przypadek I musiał do ciebie.

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

Answer 5

Możesz bezpośrednio wejść w wydarzenie sklepu load lub przekazać wydarzenie przez siatkę.

Wewnątrz klasy siatki, prawdopodobnie w funkcji initComponent, umieścić następujące informacje,

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

Answer 6

viewready pracował dla mnie !!!

skonfigurowanego jako kontroler poniżej:

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

używam ExtJS 4.2.3 i to działało.

użyłem to:

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

Dla mnie działa na chromie!

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

Answer 8

Zdaję sobie sprawę, że jest to stare pytanie, ale ja niedawno rozwiązać problem przewijania w aplikacji (4.0.2) i stary ExtJS Potrzebowałem wyzwalania/event dla kiedy html (np < stół > tag) został faktycznie zaktualizowany/wstawiony do widoku siatki.

Poniższy skrypt dodaje nowe zdarzenie "update" do pliku Ext.grid.View. Zdarzenie aktualizacji jest uruchamiane po wstawieniu html do widoku.

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

     } 
    }); 
})(); 

Aby użyć nowego zdarzenia, wystarczy dodać nowy detektor zdarzeń do widoku siatki. Przykład:

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

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

}, this); 

Należy zauważyć, że zostało to zaimplementowane przy użyciu oprogramowania ExtJS 4.0.2. Być może będziesz musiał zaktualizować skrypt dla swojej wersji ExtJS.

UPDATE

okazało się, że nowy „update” zdarzenie nie strzelał gdy pogląd renderowania pusty magazyn. W celu obejścia tego problemu rozszerzyłem metodę odświeżania widoku.

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