Change Item order in ContextMenu

[VinceBlood]

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

[pmiklashevich]

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:

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

[VinceBlood]

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 ?

this.items.sortBy('itemId',[{9},{5},{6},etc ...]

Items.png (5.74 KiB) Viewed 5183 times

[pmiklashevich]

sortBy accepts a compareFunction. Similar to Array.sort

[VinceBlood]

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.

[pmiklashevich]

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

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