扩展的ExtJS类找不到自定义侦听器功能 - "oe is undefined"

Question

我正在向TreePanel添加自定义上下文菜单.当我在上下文菜单中有一个单独的函数时,这一切都正常工作,但是如果我单击其中一个选项然后再次查看上下文菜单,我遇到的问题是上下文菜单项最终会加倍/三倍.

我浏览了其他的上下文例子,然后由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'){基本上,如果点击的节点是顶级我只想给用户一个添加子选项,不要在上面/下面添加.

在此先感谢您的帮助

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