Extjs4 MVC，将侦听器添加到视口控制器中的 view.Viewport答案

【问题标题】：Extjs4 MVC, Add listener to view.Viewport in viewport controllerExtjs4 MVC，将侦听器添加到视口控制器中的 view.Viewport
【发布时间】：2012-06-11 20:07:30
【问题描述】：

我想在 view.Viewport 添加 'afterrender' 监听器，以便在渲染视口之后做一些事情。

有人知道怎么做吗？

我的代码是，

view.Viewport.js

Ext.define('App.view.Viewport', {
    extend: 'Ext.container.Viewport',
    alias: 'widget.viewport',
.
.
.

controller.Viewport.js

Ext.define('App.controller.Viewport', {
    extend: 'Ext.app.Controller',
    init: function (application) {
        if (this.inited) {
            return;
        }
        this.inited = true;

        //console.log(this.getViewport());
        this.getViewport().addListener('load', function () {
            console.log('AFTER RENDER'); // it does not work....
        });
.
.
.

谢谢！

【问题讨论】：

标签： extjs4

【解决方案1】：

MVC Application Architecture 指南向您展示了如何做到这一点。

来自文档：

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',

    init: function() {
        this.control({
            'viewport > panel': {
                render: this.onPanelRendered
            }
        });
    },

    onPanelRendered: function() {
        console.log('The panel was rendered');
    }
});

我想如果我将此与您的代码相匹配，它将是：

Ext.define('App.controller.Viewport', {
    extend: 'Ext.app.Controller',

    init: function() {
        this.control({
            'viewport': {
                afterrender: this.onViewportRendered
            }
        });
    },

    onViewportRendered: function() {
        console.log('The viewport was rendered');
    }
});

【讨论】：