Question

我是javascript的新手，但是我被聘请为Sencha ExtJS 4中开发的应用程序提供维护。我被要求修改的模块之一是我展示的一个组件。每当我将鼠标悬停在它上面时，工具提示。该组件可以存在于多个视图中，它类似于“客户详细信息”，它存在于应用程序的许多屏幕中。如果我将鼠标悬停在此数据上，我需要显示工具提示，此工具提示显示服务器（REST）检索的信息。我实现了一些逻辑，但是这个逻辑涉及在每个显示信息的组件中使用许多监听器。例如，我在所有需要显示工具提示的视图中添加了一个监听器：

this.listeners = {
                boxready: {
                    fn: this.onAfterRender,
                    scope: this
                }

我必须为每个视图实现这个方法，这是一个烂摊子，当然，这是一个非常糟糕的做法：

/**
     * This method is executed after panels are rendered in order to set ToolTip listeners on
     * users and workgroups.
     * 
     * @param {Object} scope
     */
    onAfterRender: function(scope) {

    Ext.defer(function() {

        var usElements = Ext.get(Ext.query('.usertooltip', scope.el.dom));
        usElements.on({
            click: function (e) {
                var item = Ext.get(e.target);

                if (Ext.isEmpty(item.dom.innerHTML.trim())) {
                    item.removeCls('usertooltip');
                    return;
                }

                if (item.hasCls('usertooltip-clicked')) {
                    return;
                }

                item.addCls('usertooltip-clicked');
                var user = item.getAttribute('data-info');

                UserInfo.getUserInfo(user, false);
                if (UserInfo.errorResponse) {
                    UserInfo.getWGroupInfo(user);
                }
                UserInfo.displayToolTip(this);
            }
        });

        var wgElements = Ext.get(Ext.query('.wgtooltip', scope.el.dom));
        wgElements.on({
            click : function (e) {
                var item = Ext.get(e.target);

                if (Ext.isEmpty(item.dom.innerHTML.trim())) {
                    item.removeCls('wgtooltip');
                    return;
                }

                if (item.hasCls('wgtooltip-clicked')) {
                    return;
                }

                item.addCls('wgtooltip-clicked');
                var wgroup = item.getattribute('data-info');

                WGroupInfo.getWGroupInfo(wgroup, false);
                if (UserInfo.errorResponse) {
                    WGroupInfo.getUserInfo(wgroup);
                }
                WGroupInfo.displayToolTip(this);
            }
        });

    }, 1000, this);
},

我所做的只是检测是否根据css类选择了项目，如果是，我处理事件并继续逻辑。但我一直在做一些研究，我认为这可以通过“委托人”实现，但我不知道如何为我的方案实现这一点。

到目前为止，我一直在想的是创建一个“js”类，它有一个类似“观察者”的方法，每当听到有人要求这个工具提示功能时，都会将它委托给执行对象。但由于我是javascript和这个Sencha ExtJS的新手，我的尝试一直很沮丧。如果有人可以帮助我，我会非常感激。

提前致谢。

祝你好运。

Answer 1

最好的方法是声明一个插件：

Ext.define('TipPlugin', {
    alias: 'plugin.tip',

    init: function(c) {
        c.on('boxready', this.onBoxReady, this);
    },

    onBoxReady: function(c) {
        var els = this.el.select('.usertooltip');
        // Do stuff!
    }
});

var c = new Ext.Component({
    plugins: ['tip']
});

如何使用ExtJS 4.1实现委托者

1 个答案: