0

I want to add event listener to plugin on Controller.like http://docs.sencha.com/ext-js/4-1/#!/api/Ext.app.Controller It seems different to get plugin using component query than normal component. Is it possible to get plugin from component using component query?

Here is my component 

Ext.define('App.view.file.List',{
     rootVisible: false, 
     extend:'Ext.tree.Panel',
     alias:'widget.filelist',
     viewConfig: {
        plugins: {
            ptype: 'treeviewdragdrop', 
            allowParentInsert:true 
        }
    },
    //etc ...

Can i get treeviewdragdrop plugin using component query like 

Ext.define('App.controller.FileManagement', {
    extend:'Ext.app.Controller',
    stores:['Folder'],
    views:['file.List','file.FileManagement'],
    refs:[
        { ref:'fileList', selector:'filelist' }
    ],
    init:function () {
        this.control({  
            'filelist > treeviewdragdrop':{drop:this.drop}  // <-- here is selector
        });
    },
    // etc ....
XenoN
  • 984
  • 1
  • 10
  • 23

2 Answers2

4

You can't because a plugin is not a component, thus no selector will find it.

Also, the drop event is fired by the treeview, so the treeview is really what you want to hook to.

This will work:

init:function () {
    this.control({  
        'filelist > treeview': {drop:this.drop}
    });
},
Izhaki
  • 23,372
  • 9
  • 69
  • 107
2

There is no straightforward approach to do that. If I were in your shoes I would, probably, made tree to fire needed event when the plugin fires its event:

// view
Ext.define('App.view.file.List',{
     // ...
     viewConfig: {
        plugins: {
            ptype: 'treeviewdragdrop',
            pluginId: 'treeviewdragdrop', // <-- id is needed for plugin retrieval
            allowParentInsert:true 
        }
    },
    initComponent: funcion() {
      var me = this;
      me.addEvents('viewdrop');
      me.callParent(arguments);
      me.getPlugin('treeviewdragdrop').on('drop', function(node, data, overModel, dropPosition, eOpts) {
        // when plugin fires "drop" event the tree fires its own "viewdrop" event
        // which may be handled via ComponentQuery
        me.fireEvent('viewdrop', node, data, overModel, dropPosition, eOpts);
      });
    },
    // ...

Controller:

// controller
Ext.define('App.controller.FileManagement', {
    // ...
    init:function () {
        this.control({  
            'filelist':{viewdrop:this.drop}  // <-- here is selector
        });
    },
    // etc ....
Molecular Man
  • 22,277
  • 3
  • 72
  • 89
  • I don't think you need the whole InitComponent bit. The drop of the plugin is mirrored in the view. So the controller init just select the component, then getView(), then .on('drop'... ). – Izhaki Jun 06 '12 at 14:18
  • `addEvents` is deprecated. Just use `me.fireEvent('viewdrop', node, data, overModel, dropPosition, eOpts);` – m.spyratos Jun 29 '15 at 21:20