Change Item order in ContextMenu

Show cool things you have done with our products
Post Reply
User avatar
VinceBlood
Posts: 7
Joined: Tue May 03, 2016 8:20 pm

Change Item order in ContextMenu

Post by VinceBlood » Tue Mar 05, 2019 2:57 pm

Hi,

Do you how I could change the order of Default ContextMenu.

Actual order is :
  • Task information
  • Change color
  • Delete Task
  • Modify left label
  • Modify right label
  • Convert to Milestone
  • Divide task
  • Add
  • Delete dependency
I would to have a more practicable list:
  • Add
  • Task information
  • Delete Task
  • Change color
  • Modify left label-> remove
  • Modify right label-> remove
  • Convert to Milestone
  • Divide task
  • Delete dependency

User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 2254
Joined: Fri Apr 01, 2016 11:08 am

Re: Change Item order in ContextMenu

Post by pmiklashevich » Wed Mar 06, 2019 1:11 pm

Hello,

please see createMenuItems. You can override Gnt.plugin.TaskContextMenu and change the order of menu items there. You can do it directly in the createMenuItems, but some items are missing there and are added dynamically to the menu. So I would recommend you to change the order in before-show hook:

Code: Select all

Ext.define(null, {
    override : 'Gnt.plugin.TaskContextMenu',

    createMenuItems : function () {
        this.on('beforeshow', this.onMyBeforeShow, this);

        return this.callParent();
    },

    onMyBeforeShow : function() {
        // this.items is Ext.util.ItemCollection
        // you can modify items here, for example:
        this.items.sort('text', 'DESC');
    }
});
Pavel Miklashevich - Core Developer

User avatar
VinceBlood
Posts: 7
Joined: Tue May 03, 2016 8:20 pm

Re: Change Item order in ContextMenu

Post by VinceBlood » Wed Mar 06, 2019 7:09 pm

Hi,

Thank you for your response. I can now change the order of MenuItems.

I tried to find how force the items list without sucess. I tried to change the plugin app.plgin.TaskContextMenu include in the Advanced Gantt Example but I have only the title.

Is there any function that allow to force the order like this ?

Code: Select all

this.items.sortBy('itemId',[{9},{5},{6},etc ...]
Items.png
Items.png (5.74 KiB) Viewed 601 times

User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 2254
Joined: Fri Apr 01, 2016 11:08 am

Re: Change Item order in ContextMenu

Post by pmiklashevich » Thu Mar 07, 2019 3:15 pm

sortBy accepts a compareFunction. Similar to Array.sort
Pavel Miklashevich - Core Developer

User avatar
VinceBlood
Posts: 7
Joined: Tue May 03, 2016 8:20 pm

Re: Change Item order in ContextMenu

Post by VinceBlood » Fri Mar 08, 2019 6:38 pm

Thank you for your response.

I tried to understand how the compare function works but I don't know how to force an order list eg : "b, a, c" when we have an array containing "a, c, b". Sort will make a list like "a, b, c".

I reach my limit of javascript knowledge.

User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 2254
Joined: Fri Apr 01, 2016 11:08 am

Re: Change Item order in ContextMenu

Post by pmiklashevich » Mon Mar 11, 2019 12:41 pm

Please copy-paste the code below to the examples/advanced/app/plugin/TaskContextMenu.js and open the demo in a browser:

Code: Select all

Ext.define('Gnt.examples.advanced.plugin.TaskContextMenu', {
    extend : 'Gnt.plugin.TaskContextMenu',
    mixins : ['Gnt.mixin.Localizable'],
    alias  : [
        'plugin.advanced_taskcontextmenu',
        'widget.advanced_taskcontextmenu'
    ],

    createMenuItems : function () {
        // need to change order of items on before show because 'taskEditor' doesn't not exist at this step
        this.on('beforeshow', this.onMyBeforeShow, this);

        var items = this.callParent();

        // remove some items from menu
        items = Ext.Array.filter(items, function(item) {
            return item.itemId !== 'editLeftLabel' && item.itemId !== 'editRightLabel';
        });

        return items;
    },

    onMyBeforeShow : function () {
        // we do not destroy context menu, so it's enough to sort once
        if (this.sortedByTemplate) return;

        // array of top level itemIds in correct order
        var template = [
            'addTaskMenu',
            'taskEditor',
            'deleteTask',
            'toggleMilestone',
            'splitTask',
            'deleteDependencyMenu'
        ];

        // this.items is Ext.util.ItemCollection
        this.items.sortBy(function (a, b) {
            return template.indexOf(a.itemId) - template.indexOf(b.itemId);
        });

        this.sortedByTemplate = true;
    }
});

Pavel Miklashevich - Core Developer

Post Reply