如何使用Extjs 4.1上的组件查询从组件中获取插件?

时间:2012-06-06 06:28:25

标签: extjs extjs4 extjs-mvc

我想在Controller.like http://docs.sencha.com/ext-js/4-1/#!/api/Ext.app.Controller上向插件添加事件监听器。使用组件查询获取插件似乎与普通组件不同。 是否可以使用组件查询从组件中获取插件?

这是我的组件

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

我可以使用

等组件查询获取 treeviewdragdrop 插件吗?
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 ....

2 个答案:

答案 0 :(得分:4)

你不能,因为插件不是一个组件,因此没有选择器会找到它。

此外,树视图会触发drop事件,因此树视图实际上是您想要挂钩的。

这将有效:

init:function () {
    this.control({  
        'filelist > treeview': {drop:this.drop}
    });
},

答案 1 :(得分:2)

没有直接的方法来做到这一点。如果我穿上你的鞋子,我可能会在插件触发事件时制作树来解雇所需的事件:

// 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
Ext.define('App.controller.FileManagement', {
    // ...
    init:function () {
        this.control({  
            'filelist':{viewdrop:this.drop}  // <-- here is selector
        });
    },
    // etc ....