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.