Customizing The TaskEditor in Ext Gantt

A popular question we get in our support forums is “How do I add more fields to the TaskEditor” or “How can I add an extra tab to the editor?”. Based on this feedback we have now improved our TaskEditor and modified the ‘taskeditor’ demo to show this.

Adding extra fields to the General form

Adding an extra field to TaskEditor is now trivial. Create a subclass of our default form, and in its construction phase simply mutate the items as you need.

Ext.define('Gnt.examples.taskeditor.view.TaskEditorGeneralForm', {
    extend : 'Gnt.widget.taskeditor.TaskForm',

    constructor : function(config) {
        this.callParent(arguments);

        // add a custom field
        this.add({
            fieldLabel : 'Custom field',
            name       : 'CustomField'
        });
    }
});

Then configure your TaskEditor to use this new General form:

{
    ptype         : 'gantt_taskeditor',
    height        : 450,
    // tell editor to use our custom TaskEditorGeneralForm for the "General" tab
    taskFormClass : 'Gnt.examples.taskeditor.view.TaskEditorGeneralForm'
},

Adding extra fields to the General form

Sometimes it’s not enough to just add individual fields. What if you want a bigger component, like a Grid inside the TaskEditor. Then it’s better to add a new tab. First subclass our TaskEditor component, and specify your additional items which are then added as tabs. In the snippet below, we add a new tab with a TextField and a CheckBox.

Ext.define('Gnt.examples.taskeditor.view.TaskEditor', {
    extend   : 'Gnt.widget.taskeditor.TaskEditor',

    requires : [
        'Ext.form.field.Text',
        'Ext.form.field.Checkbox'
    ],

    items : [
        {
            padding : 10,
            title   : 'Custom tab',
            items   : [
                {
                    xtype      : 'textfield',
                    name       : 'SomeField',
                    fieldLabel : 'Some field'
                },
                {
                    xtype      : 'checkbox',
                    name       : 'Rollup',
                    fieldLabel : 'Rollup'
                }
            ]
        }
    ]
});

Now just tell the TaskEditor plugin to use your custom TaskEditor as its main component.

{
    ptype         : 'gantt_taskeditor',
    // tell editor to use our custom TaskEditor widget with an extra custom tab
    taskEditorCls : 'Gnt.examples.taskeditor.view.TaskEditor'
},

Try it out yourself today!

This is currently available in the nightly build and will appear in the coming 6.0.8 release. We hope this helps you customize your task editors.