extjs - 扩展的 ExtJS 类找不到自定义监听器函数 - "oe is undefined"

Question

我正在向 TreePanel 添加自定义上下文菜单。 当我有一个单独的上下文菜单功能时，这一切都有效，但我遇到了问题，如果我单击其中一个选项然后再次查看上下文菜单，上下文菜单项最终会增加一倍/三倍。

我查看了其他上下文菜单示例并想出了 this one by Aaron Conran我几乎是“窃取”了它，并添加了一些内容，将功能直接添加到 Ext.ext.treePanel 配置中。这给了我一个关于“oe is undefined”的错误，它似乎指的是树配置中的“contextmenu: this.onContextMenu”。

我认为这可能与我定义所有这些的方式有关，所以我决定考虑使用我的功能扩展 Ext.ext.TreePanel 作为学习练习。

不幸的是，在设法解决扩展 TreePanel 问题后，当页面尝试构建 TreePanel 时，我现在又回到了“oe is undefined”的状态。我环顾四周，但我不确定是什么导致了问题，因此我们将不胜感激任何帮助或建议。

这是用于定义/构建树面板的代码。我希望它不会太可怕。

siteTree = Ext.extend(Ext.tree.TreePanel,{
        constructor : function(config){
            siteTree.superclass.constructor.call(this, config);
        },
        onContextMenu: function(n,e){
        if (!this.contextMenu){
            console.log('treeContextMenu',n,e);

            if (n.parentNode.id == 'treeroot'){
                var menuitems = [{text:'Add Child',id:'child'}];
            } else {
                var menuitems = 
                        [{text:'Add Child',id:'child'},
                         {text:'Add Above',id:'above'},
                         {text:'Add Below',id:'below'}];
            }

            this.contextMenu = new Ext.menu.Menu({
                id:'treeContextMenu',
                defaults :{
                    handler : treeContextClick,
                    fqResourceURL : n.id
                },
                items : menuitems
            });
        }
        var xy = e.getXY();
        this.contextMenu.showAt(xy);
    }           
});

var treePanel = new siteTree({
    id: 'tree-panel',
    title : 'Site Tree',
    region : 'center',
    height : 300,
    minSize: 150,
    autoScroll: true,

    // tree-specific configs:
    rootVisible: false,
    lines: false,
    singleExpand: true,
    useArrows: true,

    dataUrl:'admin.page.getSiteTreeChildren?'+queryString,
    root: {
        id: 'treeroot',
        nodeType: 'async',
        text: 'nowt here',
        draggable: false
    },
    listeners:{
        contextmenu: this.onContextMenu
    }
});

总的来说；在我的上下文菜单功能中是否有更好的方法来执行此操作？

if (n.parentNode.id == 'treeroot') { Basically, if the clicked node is the top level I only want to give the user an add Child option, not add above/below.

预先感谢您的帮助

Answer 1

在您的 siteTree 类的实例化中:

listeners: {
    contextmenu: this.onContextMenu
}

但是，在实例化时，this.onContextMenu 并未指向您在 siteTree 中定义的 onContextMenu 方法。

修复它的一种方法是从包装函数中调用该方法:

listeners: {
    contextmenu: function() {
        this.onContextMenu();
    }
}

假设您没有覆盖监听器配置中的范围，“this”将在执行监听器时指向 siteTree 实例。

但是，由于您已经在 siteTree 类中定义了上下文菜单，因此您也可以在那里定义监听器:

constructor: function( config ) {
    siteTree.superclass.constructor.call(this, config);
    this.on('contextmenu', this.onContextMenu);
}

确保连同树一起删除上下文菜单也是一个好主意。这使您的 siteTree 定义:

var siteTree = Ext.extend(Ext.tree.TreePanel, {
    constructor: function( config ) {
        siteTree.superclass.constructor.call(this, config);
        this.on('contextmenu', this.onContextMenu);
        this.on('beforedestroy', this.onBeforeDestroy);
    },
    onContextMenu: function( node, event ) {
        /* create and show this.contextMenu as needed */
    },
    onBeforeDestroy: function() {
        if ( this.contextMenu ) {
            this.contextMenu.destroy();
            delete this.contextMenu;
        }
    }
});