我正在使用 ExtJS 将数据加载到网格中，并且我想在数据完全放入网格后添加一些额外的过程。
我的上下文是，在将数据放入网格后，我将检查所有行，并根据指定的条件将其中一些标记为禁用，并将工具提示放在行中（解释为什么它被禁用）。我尝试使用 2 个事件：Grid 的“afterrender”和 grid 的 store 的“load”，但它们不起作用。
因为grid's 'afterrender'在第一次网格初始化时被触发，不关心数据加载。store's 'load'当数据被预取以存储（不在屏幕上呈现）时被触发，因此我无法将行<div>设置为禁用。
那么，检测数据何时加载并完全呈现在网格上的事件是什么？我该如何实现这个要求？
你试过viewready吗？
Ext.create('Ext.grid.Panel', {
// ...
viewConfig: {
listeners: {
viewready: function(view) {
// ...
}
}
}
});
您可以直接点击商店的load活动，或通过网格转发活动。
在网格类内部，可能在initComponent函数中，放入以下内容，
this.relayEvents(this.getStore(), [ 'load' ]);
我认为对于您的任务，您不需要等到加载网格，而是使用viewConfig网格面板的选项来配置如何准确地显示您的行：
viewConfig: {
getRowClass: function(r) {
if (r.get('disabled'))
return 'disabled-class';
else
return '';
}
}
如果您使用该setTimeout函数，它将强制在渲染完成后进行调用，它在与您的情况类似的情况下工作。
listeners: {
'afterrender': function(grid) {
setTimeout(function(){
// ...
我意识到这是一个老问题，但我最近不得不修复一个旧的 ExtJS (4.0.2) 应用程序中的滚动问题，我需要一个触发器/事件来处理 html（例如 <table> 标签）实际上被更新/插入到网格视图。
以下脚本将新的“更新”事件添加到 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!
}
}
});
})();
使用 getForm().load() 上的 success: 属性调用函数来处理加载后处理
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);
}
}
});
}
}
我使用 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 上工作！