Как реализовать делегата с использованием ExtJS 4.1

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); 
}, 

Что я делаю, это просто обнаружить, если элемент выбран на основе класса КАС, если да, то я обрабатывать события и продолжить логику. Но я занимаюсь некоторыми исследованиями, и я думаю, что это может быть достигнуто с помощью «делегирования», но я не уверен, как реализовать это для моего сценария.

То, о чем я думал, до сих пор заключается в создании класса «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'] 
});