我使用ExtJS的將數據加載到一個網格，我想添加一些額外的處理數據被投入後電網完全。進程被完全加載使用ExtJS的
我的背景下，數據被提上電網後，我將檢查所有的行，並標記他們中的一些基於特定條件殘疾，並把工具提示行（解釋爲什麼它被禁用）。我嘗試使用2個事件：Grid的'afterrender'，以及grid的store的'load'，但它們不起作用。
因爲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) {
// ...
}
}
}
});
使用成功：財產上getForm（）load（）來調用一個函數來處理後負載處理
如果使用setTimeout功能就會迫使呼叫渲染髮生後，已經完成了，它在一個類似的情況下，我的工作只有你的。
listeners: {
'afterrender': function(grid) {
setTimeout(function(){
// ...
您可以直接點擊商店的load事件，或通過網格中繼事件。
裏面的電網類，大概在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);
}
}
});
}
}
我使用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！
我意識到這是一個老問題，但最近我在一箇舊的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;
}
}
});
})();
要使用新事件，只需將新事件偵聽器添加到網格視圖。示例：
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!
}
}
});
})();
您使用的是什麼版本的ExtJs？我認爲你試圖從錯誤的角度解決你的問題。 – sha
我正在使用ExtJS 4.0.1，謝謝。 –