渲染器后触发或调用 Ext js 事件答案

【问题标题】：Ext js event fired or called after renderer渲染器后触发或调用 Ext js 事件
【发布时间】：2014-03-20 16:24:43
【问题描述】：

我有一个使用渲染器功能的网格列。在此之后是否触发或调用了任何事件？我已经尝试了几个，但它们都在整个列上被调用并且它们都在渲染器之前触发（甚至是事件后渲染）

提前致谢

【问题讨论】：

【解决方案1】：

afterrender 仅在列在页面上布局时触发一次。它是一个基本的 ExtJS 组件事件，几乎所有 ExtJS 组件都有，并且与用于网格列的渲染器函数无关。

不完全确定您要这样做是为了什么……但是如果我想在渲染器函数执行时触发一个事件，我会从渲染器函数本身触发一个自定义事件。像这样的：

Ext.create('Ext.grid.Panel', {
    title: 'After Renderer Event Demo',
    store: Ext.getStore('DummyData'),
    columns: [{
        text: 'Column 1',  
        dataIndex:'aNumber',

        // dummy renderer function that fires an event after execution
        renderer: function(value) {

            // wrapping in a deferred function so that it fires AFTER
            Ext.defer(function() {
                this.fireEventArgs('aftercolumnrenderer', arguments);
            }, 10);

            if (value === 1) {
                return '1 person';
            }
            return value + ' people';
        }


    }, {
        text: 'Column 2',  
        dataIndex:'aString'
    }],
    width: 400,
    forceFit: true,
    renderTo: Ext.getBody()
});

我可以直接听：

myColumn.on('aftercolumnrenderer', function(value, metaData, record, rowIndex, colIndex, store, view) {

    // do stuff

});

如果您使用的是 ExtJS MVC，则来自控制器的 control 函数。

另请参阅 fireEventArgs 和 on method 以供参考。

【讨论】：