Gridview 使用ExtJS完全加载网格后的进程

我正在使用ExtJS将数据加载到网格中，我想在数据完全放到网格中之后添加一些额外的进程

我的上下文是，在数据放在网格上之后，我将检查所有行，并根据指定的条件将其中一些行标记为禁用，并将工具提示放在行中（解释禁用的原因）。我尝试使用两个事件：网格的“afterrender”和网格存储的“load”，但都不起作用

因为

网格的“afterrender”

是在第一次网格初始化时触发的，与数据加载无关<代码>存储区的“加载”是在数据预取到存储区（而不是在屏幕上渲染）时触发的，因此我无法使行

将其样式设置为禁用

那么，当数据完全在网格上加载和呈现时，要检测什么事件呢？我如何实现这一要求？

您试过了吗

---

使用getForm（）.load（）上的success:property调用一个函数来处理加载后处理

我认为对于您的任务，您不需要等待网格加载，而是使用网格面板的

viewConfig

选项来配置如何准确显示行：

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

---

如果您使用

setTimeout

函数，它将强制调用在渲染完成后进行，这与我的情况类似

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

---

您可以直接点击商店的

load

事件，或者通过网格转发事件

在grid类中，可能在

initComponent

函数中，放置以下内容：

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

---

viewready

为我工作

在控制器中配置如下：

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

---

我使用ExtJS4.2.3，这很有效

我用了这个：

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

this.grid=Ext.create（'Ext.grid.Panel'{
商店：这个是ds，
边距：“0 10'，//右上角按钮左
标题：lng.menu.caption.mailHeaderGrid，
selType:'checkboxmodel'，
列：[……]，
selModel：{
渲染器：函数（值、元数据、记录、行索引、共索引、存储、视图）{
var baseCSSPrefix=Ext.baseCSSPrefix；
metaData.tdCls=baseCSSPrefix+“特殊网格单元”+baseCSSPrefix+“网格单元行检查器”；
return（record.get（'status'）='lng.label.surveyFinalized'）？“”；
},
},

对我来说，在chrome上工作

---

我意识到这是一个老问题，但我最近不得不修复一个旧ExtJS（4.0.2）应用程序中的滚动问题，我需要一个触发器/事件，用于在网格视图中实际更新/插入html（例如标记）

以下脚本将新的“更新”事件添加到Ext.grid.View中。在将html插入视图后，将触发更新事件

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

        }
    });
})();

请注意，这是使用ExtJS 4.0.2实现的。您可能需要更新ExtJS版本的脚本

更新

我发现当视图呈现空存储时，新的“更新”事件没有触发。作为一种解决方法，我扩展了视图的刷新方法

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

（函数（）{
var\u refresh=Ext.grid.View.prototype.refresh；
Ext.override（Ext.grid.View{
刷新：函数（）{
_refresh.apply（这个，参数）；
var视图=此；
var el=view.getTargetEl（）；
var records=view.store.getRange（）；
如果（记录长度<1）{
view.fireEvent（“更新”，视图，el）；//在ExtJS 4.0.7中，此事件似乎是在加载存储之前触发的，而不是在加载之后。在这里使用ExtJS 5.1，它似乎可以完成此任务。根据API描述：在呈现表示存储项的视图的项元素时触发。在触发此事件之前，没有可供选择的项。因此我的理解是，这应该是商店加载后出现，与我在屏幕上看到的匹配。您使用的是什么版本的ExtJs？我认为您试图从错误的角度解决问题。我使用的是ExtJs 4.0.1，谢谢。
paymentGrid.view.on("update", function(view, el){ //vs paymentGrid.store.on("load", ...

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

}, this);

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