Question

版本ExtJs-6.2.1 考虑到下面指定的示例代码，我很想知道是否有更好的方法来实现我可以在其中进行一些检查的地方。

Ext.define('MainApp.view.main.MainController', {
    extend: 'Ext.app.ViewController',
    ...    
    listen: {
        controller: {
            // listen to some components events
            'componentController':{
                'event1': 'onEvent1',
                'event2': 'onEvent2'
            }
        }
    },

    onEvent1: function(){

        // can i avoid this and do something better ??
        this.commonEventHandlingChecks();

        // event 1 handling logic
    },

    onEvent2: function(){

        // can i avoid this and do something better ??
        this.commonEventHandlingChecks();

        // event 2 handling logic
    },

    commonEventHandlingChecks: function(){
       // some logic to do some custom validations      
    }

});

有一种更好的方法来执行所有常见事件处理检查，而不是在我在控制器中拥有的每个侦听器上调用方法“ commonEventHandlingChecks”。可能是通过覆盖控制器或Ext.util.Event

中的某些方法

Answer 1

Ext.Mixin确实有一个mixinConfig before API，可以在mixin上添加一个函数并执行它。如果返回false，则该函数将无法执行。在类说明here (link to the 6.2.1 version since you said you were using it)中对此进行了记录。

那将起作用，除了mixin必须知道它所混入的类中的哪些方法需要保护。如果您想在不同的类中使用mixin，这将无法很好地扩展。为此，我会做一些更高级的操作，但要保留与before API提供的功能相同的功能。这种混合看起来像：

Ext.define('MyAuthMixin', {
    extend: 'Ext.Mixin',

    onClassMixedIn: function (targetClass) {
        const proto = targetClass.prototype
        const config = proto.config
        const protectedMethods = config.protectedMethods || proto.protectedMethods
        // change this method name if you want something else
        const checkAuth = this.prototype.checkAuth

        if (protectedMethods) {
            Ext.Object.each(protectedMethods, function (key, value) {
                if (value && proto[ key ]) {
                    targetClass.addMember(key, function () {

                        // execute the checkAuth methods
                        // change this variable to change the method name
                        if (checkAuth.apply(this, arguments) !== false) {
                            return this.callParent(arguments);
                        }
                    });
                }
            });
        }
    },

    checkAuth: function () {
        // return false to stop calling
        return !!MyApp.$user
    }
})

不要被onClassMixedIn函数吓到。基本上，它会将checkAuth方法放在要保护的方法之前，如果您在false中返回checkAuth，它将不会执行该受保护的方法。

有关如何使用它以及如何实际运行的示例，我创建了此fiddle。在类中的实现将是这一部分：

mixins: [
    'MyAuthMixin'
],

config: {
    // put in a config object so subclass and superclass merging
    // which is also why it's an object as a subclass can disable
    // a protected method
    protectedMethods: {
        'onEvent1': true,
        'onEvent2': true
    }
},

要不保护方法，可以将其省略或将其设置为false。设置为false的原因将仅仅是子类，如果它扩展了已打开该类的类，则可能会禁用检查。这个mixin可以用于 any 类，而不仅仅是控制器。它可以是组件，单例或存储。

有没有一种方法可以覆盖ExtJs中的所有viewcontroller侦听器

1 个答案: