Custom Context menu.

[sun.msu]

I have read this discussion,
and also read documentation,

https://forum.bryntum.com/viewtopic. ... enu#p11122

I have made changes accordingly but what I get is shown in image bellow,

I want to hide some items from my custom context menu,
Instead it shows an empty item on menu.

How to resolve it?

[jakub]

Can you post your modified context menu code ?

[sun.msu]

 Ext.define('My.GanntTaskContextMenu', {
            extend: 'Gnt.plugin.TaskContextMenu',
            texts: {
                newTaskText: 'Add task',
                add: 'Add',
                deleteDependency: 'Delete dependency...',
                addSubtask: 'Sub-task'

            }
        });

This is my code.

[mats]

What do you expect to happen? You're just redefining some texts?

[sun.msu]

I want to hide some items from it.

Like I don't want successor and predecessor in my custom context menu.

Thanks.

[mats]

Did you read the docs? https://bryntum.com/products/gantt-for-extjs/docs/#!/a ... ontextMenu

It explains that you can override getMenuItems, look at the TaskContextMenu plugin source and you'll see it creates its items.

[sun.msu]

I don't want any modification in that,

I just want to hide some of options from context menu .(e.g I don't want to show option Add Successor or Add predecessor).

Thanks.

[mats]

I suggest you create your own context menu plugin, use the standard one as guidance.

[sun.msu]

Can't I hide some of options from default context menu?

[mats]

Well, sure - if you just read the source code it'll be obvious. You'll need to override this method:

createMenuItems : function() {
        var texts       = this.texts;

        return [
            {
                handler     : this.deleteTask,
                requiresTask: true,
                scope       : this,
                text        : texts.deleteTask
            },
            {
                handler     : this.editLeftLabel,
                requiresTask: true,
                scope       : this,
                text        : texts.editLeftLabel
            },
            {
                handler     : this.editRightLabel,
                requiresTask: true,
                scope       : this,
                text        : texts.editRightLabel
            },
            {
                text        : texts.add,
                
                menu        : {
                    plain   : true,
                    items   : [
                        {
                            handler     : this.addTaskAboveAction,
                            requiresTask: true,
                            scope       : this,
                            text        : texts.addTaskAbove
                        },
                        {
                            handler     : this.addTaskBelowAction,
                            scope       : this,
                            text        : texts.addTaskBelow
                        },
                        {
                            handler     : this.addMilestone,
                            requiresTask: true,
                            scope       : this,
                            text        : texts.addMilestone
                        },
                        {
                            handler     : this.addSubtask,
                            requiresTask: true,
                            scope       : this,
                            text        : texts.addSubtask
                        },
                        {
                            handler     : this.addSuccessor,
                            requiresTask: true,
                            scope       : this,
                            text        : texts.addSuccessor
                        },
                        {
                            handler     : this.addPredecessor,
                            requiresTask: true,
                            scope       : this,
                            text        : texts.addPredecessor
                        }
                    ]
                }
            },
            {
                text    : texts.deleteDependency,
                requiresTask : true,
                
                isDependenciesMenu      : true,
                
                menu    : { 
                    plain       : true,
                    
                    listeners   : {
                        beforeshow  : this.populateDependencyMenu,
                        
                        // highlight dependencies on mouseover of the menu item
                        mouseover   : this.onDependencyMouseOver,
                        
                        // unhighlight dependencies on mouseout of the menu item
                        mouseleave  : this.onDependencyMouseOut,
                        
                        scope       : this
                    }
                }
            }
        ];
    },

And leave in there what you want. I'd very much recommend writing your own menu, good opportunity to learn how to build custom extensions too!