我使用ExtJS的将数据加载到一个网格，我想添加一些额外的处理数据被投入后电网完全。
我的背景是，数据被提上电网后，我将检查所有的行，并标记他们中的一些基于特定条件残疾，并把工具提示行（解释为什么它被禁用）。 我试图用2个事件：电网的“AfterRender阶段”，和电网的商店的“负荷”，但他们没有工作。
由于grid's 'afterrender'被解雇时，首先初始化网格，不关心数据负载。 store's 'load'时的数据预取被存储（在屏幕上不能渲染）被解雇了，所以我不能让该行<div>的样式就为禁用。
那么，什么是当数据被加载并在电网完全呈现检测到的事件吗？ 我怎样才能实现这一要求？
我想给你的任务，你不必等到电网加载而是使用viewConfig选项网格面板配置究竟如何显示您行：
viewConfig: {
getRowClass: function(r) {
if (r.get('disabled'))
return 'disabled-class';
else
return '';
}
}
您是否尝试过viewready ？
Ext.create('Ext.grid.Panel', {
// ...
viewConfig: {
listeners: {
viewready: function(view) {
// ...
}
}
}
});
你可以挖掘到商店的load情况下，直接或通过网格中继事件。
里面的电网类，大概在initComponent功能，把以下，
this.relayEvents(this.getStore(), [ 'load' ]);
如果您使用setTimeout功能，这将迫使呼叫的渲染完成后发生的，它曾在类似的情况下，我只好你的。
listeners: {
'afterrender': function(grid) {
setTimeout(function(){
// ...
我意识到这是一个老问题，但最近我在一个旧的ExtJS（4.0.2）的应用程序来解决一个滚动的问题，我需要的时候HTML（如<table>标签）实际上是更新/插入一个触发/事件网格视图。
下面的脚本添加了新的“更新”事件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;
}
}
});
})();
要使用新的事件，您只需一个新的事件监听器添加到网格视图。 例：
paymentGrid.view.on("update", function(view, el){ //vs paymentGrid.store.on("load", ...
//do something...
console.log(el);
}, this);
请注意，这是使用ExtJS的4.0.2实现。 您可能需要更新脚本为您的ExtJS的版本。
UPDATE
我发现，当一种观点呈现一个空店新的“更新”事件不点火。 作为一种变通方法，我扩展视图的刷新方法。
(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（）来调用一个函数来处理后处理负荷
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！
https://www.sencha.com/forum/showthread.php?237641-How-to-hide-certain-checkbox-in-a-CheckboxSelectionModel
