使用 ExtJS 完全加载网格后的过程答案

【问题标题】：Process after grid was loaded completely using ExtJS使用 ExtJS 完全加载网格后的过程
【发布时间】：2012-06-27 08:34:03
【问题描述】：

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

我的上下文是，在将数据放入网格后，我将检查所有行，并根据指定条件将其中一些标记为禁用，并将工具提示放在行中（解释为什么它被禁用）。我尝试使用 2 个事件：Grid 的 'afterrender' 和 grid 的 store 的 'load'，但它们不起作用。

因为grid's 'afterrender' 在第一次网格初始化时被触发，不关心数据加载。 store's 'load' 在数据被预取存储（不在屏幕上呈现）时被触发，所以我无法将行 <div> 设置为禁用。

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

【问题讨论】：

您使用的是什么版本的 ExtJs？我认为你试图从错误的角度解决你的问题。
我正在使用 ExtJS 4.0.1，谢谢。

标签： gridview extjs event-handling extjs4

【解决方案1】：

你试过viewready吗？

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

【讨论】：

在 ExtJS 4.0.7 中，此事件似乎在商店加载之前触发，而不是之后。
在这里使用 ExtJS 5.1，它似乎可以完成这项工作。根据 API 描述： 当 View 的 item 元素代表 Store items 被渲染时触发。在此事件触发之前，没有可供选择的项目。 所以我的理解是，这应该在商店加载后发生，并且与我在屏幕上看到的内容相匹配。

【解决方案2】：

您可以直接点击商店的load 事件，或通过网格转发事件。

grid类里面，大概在initComponent函数里面，放如下，

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

【讨论】：

【解决方案3】：

我认为对于您的任务，您不需要等到加载网格，而是使用网格面板的viewConfig 选项来配置如何准确地显示您的行：

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

【讨论】：

【解决方案4】：

如果您使用 setTimeout 函数，它将强制在渲染完成后进行调用，它的工作原理与您的情况类似。

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

【讨论】：

【解决方案5】：

我意识到这是一个老问题，但我最近不得不修复旧 ExtJS (4.0.2) 应用程序中的滚动问题，并且我需要一个触发器/事件来处理 html（例如

标记）实际更新/插入到网格视图中。

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

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

        }
    });
})();

要使用新事件，您只需向网格视图添加一个新事件侦听器。示例：

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

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

}, this);

请注意，这是使用 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!
            }
        }
    });
})();

【讨论】：

【解决方案6】：

使用 getForm().load() 上的 success: 属性调用函数来处理加载后处理

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

我使用的是 extjs 4.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>';
         },
     },

我在 chrome 上工作！

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

【讨论】：