Gnt.plugin.TaskEditor

Discuss issues related to v3.x
User avatar
marcl
Posts: 24
Joined: Fri Jun 06, 2014 11:52 am

Gnt.plugin.TaskEditor

Post by marcl »

Hi,


I upgrade my Gantt to 3.x.
I use custom form in Gantt 2.x, but in 3.x not working.

Code: Select all

 // some custom user form
        var customForm = new Gnt.widget.taskeditor.TaskForm({
            title: 'SKC',
            xtype: 'taskform',
            items: [
                    {
                        // explicitly create a Container
                        xtype: 'container',
                        layout: {
                            type: 'hbox'
                        },
                        width: 600,
                        defaults: {
                            labelWidth: 80,
                            // implicitly create Container by specifying xtype
                            xtype: 'datefield',
                            flex: 1,
                            style: {
                                padding: '10px'
                            }
                        },
                        items:
                            [
                                {
                                    // explicitly create a Container
                                    xtype: 'container',
                                    layout: {
                                        type: 'vbox'
                                    },
                                    width: 300,
                                    defaults: {
                                        labelWidth: 80,
                                        // implicitly create Container by specifying xtype
                                        xtype: 'datefield',
                                        flex: 1,
                                        style: {
                                            padding: '10px'
                                        }
                                    },
                                    items:
                                        [
                                            {
                                                xtype: 'combo',
                                                fieldLabel: 'Department',
                                                id: 'DepartmentID',
                                                allowBlank: false,
                                                name: 'DepartmentID',
                                                displayField: 'Name',
                                                valueField: 'Id',
                                                store: this.deptStore,
                                                labelWidth: 80,
                                                queryMode: 'local',
                                                typeAhead: true
                                            },
                                            {
                                                xtype: 'numberfield',
                                                fieldLabel: 'Plan Income',
                                                id: 'PlanIncome',
                                                allowBlank: true,
                                                name: 'PlanIncome',
                                                minValue: 0,
                                                allowDecimals: true,
                                                decimalPrecision: 2,
                                                blankText: 'Plan Income'
                                            },
                                            {
                                                xtype: 'combo',
                                                fieldLabel: 'Plan Income Vat',
                                                id: 'PlanIncomeVatID',
                                                displayField: 'Name',
                                                valueField: 'Id',
                                                store: this.vatStore,
                                                allowBlank: true,
                                                name: 'PlanIncomeVatID'
                                            },
                                            {
                                                xtype: 'combo',
                                                fieldLabel: 'Plan Income Currency',
                                                id: 'PlanIncomeCurrencyID',
                                                displayField: 'Name',
                                                valueField: 'Id',
                                                store: this.currencyStore,
                                                allowBlank: true,
                                                name: 'PlanIncomeCurrencyID'
                                            },
                                            {
                                                xtype: 'combo',
                                                fieldLabel: 'Plan Income Pay Type',
                                                id: 'PlanIncomePayTypeID',
                                                displayField: 'Name',
                                                valueField: 'Id',
                                                store: this.payTypeStore,
                                                allowBlank: true,
                                                name: 'PlanIncomePayTypeID'
                                            }
                                        ]

                                }
                                ,
                                {
                                    // explicitly create a Container
                                    xtype: 'container',
                                    layout: {
                                        type: 'vbox'
                                    },
                                    width: 300,
                                    defaults: {
                                        labelWidth: 80,
                                        // implicitly create Container by specifying xtype
                                        xtype: 'datefield',
                                        flex: 1,
                                        style: {
                                            padding: '10px'
                                        }
                                    },
                                    items:
                                        [
                                            {
                                                xtype: 'checkbox',
                                                fieldLabel: 'Is SKC Financial',
                                                labelWidth: 150,
                                                id: 'IsSKCFinancial',
                                                allowBlank: true,
                                                name: 'IsSKCFinancial',
                                                blankText: 'Is SKC Financial'
                                            },
                                            {
                                                xtype: 'numberfield',
                                                fieldLabel: 'Plan Cost',
                                                id: 'PlanCost',
                                                allowBlank: true,
                                                minValue: 0,
                                                allowDecimals: true,
                                                decimalPrecision: 2,
                                                name: 'PlanCost',
                                                blankText: 'Plan Cost'
                                            },
                                            {
                                                xtype: 'combo',
                                                fieldLabel: 'Plan Cost Vat',
                                                id: 'PlanCostVatID',
                                                displayField: 'Name',
                                                valueField: 'Id',
                                                store: this.vatStore,
                                                allowBlank: true,
                                                name: 'PlanCostVatID'
                                            },
                                            {
                                                xtype: 'combo',
                                                fieldLabel: 'Plan Cost Currency',
                                                id: 'PlanCostCurrencyID',
                                                displayField: 'Name',
                                                valueField: 'Id',
                                                store: this.currencyStore,
                                                allowBlank: true,
                                                name: 'PlanCostCurrencyID'
                                            },
                                            {
                                                xtype: 'combo',
                                                fieldLabel: 'Plan Cost Pay Type',
                                                id: 'PlanCostPayTypeID',
                                                displayField: 'Name',
                                                valueField: 'Id',
                                                store: this.payTypeStore,
                                                allowBlank: true,
                                                name: 'PlanCostPayTypeID'
                                            }
                                        ]

                                }
                            ]

                    }

            ]
            //,
            //taskStore: taskStore
        });

        Ext.apply(this, {
            // Define a custom HTML template for regular tasks
            taskBodyTemplate : '<div class="sch-gantt-progress-bar" style="width:{progressBarWidth}px;{progressBarStyle}" unselectable="on"><span class="sch-gantt-progress-bar-label">{[Math.round(values.percentDone)]}%<span></span></div>',

            // Define properties for the left 'locked' and scrollable tree grid
            lockedGridConfig : {
                width       : 400
            },

            // Define properties for the left 'locked' and scrollable tree view
            lockedViewConfig : {
                stripeRows              : true,

                // Enable node reordering in the locked grid
                plugins     : {
                    ptype           : 'treeviewdragdrop',
                    containerScroll : true
                }
            },

            normalViewConfig : {
                stripeRows              : true,
                // Adds a CSS class to each row element
                getRowClass : function (rec) {
                    return rec === this.store.getRootNode().firstChild ? 'first-row' : '';
                }
            },

            leadingBufferZone : 1, // HACK: temp fix for Ext JS 5 buffered renderer issue
            // Define properties for the schedule section
            schedulerConfig  : {
            },

            // Define what should be shown in the left label field, along with the type of editor
            leftLabelField : {
                dataIndex : 'Name',
                editor    : { xtype : 'textfield' }
            },

            // Add some extra functionality
            plugins        : [
                this.editingInterface = Ext.create('Sch.plugin.TreeCellEditing', { clicksToEdit : 2 }),
                Ext.create("MyApp.TaskArea"),
                Ext.create("MyApp.TaskContextMenu"),
                Ext.create("Sch.plugin.Pan"),

                // setup task editor
                Ext.create('Gnt.plugin.TaskEditor', {
                    tabsConfig: {
                        items: customForm
                    },
                    listeners: {
                        // populate custom form with task values
                        loadtask: function (taskeditor, task) {
                            customForm.loadRecord(task);
                        },
                        afterupdatetask: function (taskeditor) {
                            // update form fields to loaded task
                            customForm.updateRecord();
                        }//,
                        //validate: function (taskeditor, tabToFocus) {
                        //    var field = taskeditor.down('DepartmentID');
                        //    // if validation of our field failed
                        //    if (!field.isValid()) {
                        //        // if no other tabs with some invalid control
                        //        if (!tabToFocus) {
                        //            var activeTab = taskeditor.getActiveTab();
                        //            // if our field is not placed at currently active tab
                        //            if (!field.isDescendantOf(activeTab)) {
                        //                // then we'll switch to tab where our field resides
                        //                taskeditor.setActiveTab(taskeditor.getTabByComponent(field));
                        //            }
                        //        }
                        //        // return false since validation failed
                        //        return false;
                        //    }
                        //}
                    }
                }),
Why ot work properly?
SKC tab not visible.
I didn't get an error.

Pls help me.

thx

Marcell

User avatar
mats
Core Developer
Core Developer
Posts: 16407
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: Gnt.plugin.TaskEditor

Post by mats »

Did you try to debug it? We'll need a clear simple test case to assist you.
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
marcl
Posts: 24
Joined: Fri Jun 06, 2014 11:52 am

Re: Gnt.plugin.TaskEditor

Post by marcl »

Hi,

Yes of course I did it.
loadtask and afterupdatetask call with task data.
I see task in loadRecord of course, but in form object can't see SKC tab.
The last is Note what the default.

Marcell

User avatar
mats
Core Developer
Core Developer
Posts: 16407
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: Gnt.plugin.TaskEditor

Post by mats »

Then you need to post a real test case.
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
marcl
Posts: 24
Joined: Fri Jun 06, 2014 11:52 am

Re: Gnt.plugin.TaskEditor

Post by marcl »

Never mind1.
Just rename"tabsConfig" to "panelConfig" in create section and working.

Code: Select all

 Ext.create('Gnt.plugin.TaskEditor', {
                    panelConfig: {
                        items: customForm
                    },
                    listeners: {
Please close ticket.

Marcell

User avatar
marcl
Posts: 24
Joined: Fri Jun 06, 2014 11:52 am

Re: Gnt.plugin.TaskEditor

Post by marcl »

Hi,

I get other question.

1.
I use custom form, and when I add taskStore in custome form get an error:

Your sample:

Code: Select all

 // some custom user form
 var customForm = new Gnt.widget.taskeditor.TaskForm({
     title : 'Custom form panel',
     xtype : 'taskform',
     items : [
         {
             fieldLabel  : 'Foo field',
             name        : 'foo',
             allowBlank  : false
         }
     ],
     taskStore   : taskStore
 });

 var taskEditor = Ext.create('Gnt.plugin.TaskEditor', {
     // register custom form as an additional tab
     panelConfig : {
         items       : customForm
     },
     listeners   : {
         // populate custom form with task values
         loadtask : function (taskeditor, task) {
             customForm.loadRecord(task);
         },
         ....
     }
 });

My Code:

Code: Select all


        // some custom user form
        MyApp.customForm = new Gnt.widget.taskeditor.TaskForm({
            title: 'SKC',
            xtype: 'taskform',
            items: [
                    {
                        // explicitly create a Container
                        xtype: 'container',
                        layout: {
                            type: 'hbox'
                        },
                        width: 600,
                        defaults: {
                            labelWidth: 80,
                            // implicitly create Container by specifying xtype
                            xtype: 'datefield',
                            flex: 1,
                            style: {
                                padding: '10px'
                            }
                        },
                        items:
                            [
                                {
                                    // explicitly create a Container
                                    xtype: 'container',
                                    layout: {
                                        type: 'vbox'
                                    },
                                    width: 300,
                                    defaults: {
                                        labelWidth: 80,
                                        // implicitly create Container by specifying xtype
                                        xtype: 'datefield',
                                        flex: 1,
                                        style: {
                                            padding: '10px'
                                        }
                                    },
                                    items:
                                        [
                                            {
                                                xtype: 'combo',
                                                fieldLabel: 'Department',
                                                id: 'DepartmentID',
                                                allowBlank: false,
                                                name: 'DepartmentID',
                                                displayField: 'Name',
                                                valueField: 'Id',
                                                store: this.deptStore,
                                                labelWidth: 80,
                                                queryMode: 'local',
                                                typeAhead: true
                                            },
                                            {
                                                xtype: 'numberfield',
                                                fieldLabel: 'Plan Income',
                                                id: 'PlanIncome',
                                                allowBlank: true,
                                                name: 'PlanIncome',
                                                minValue: 0,
                                                allowDecimals: true,
                                                decimalPrecision: 2,
                                                blankText: 'Plan Income'
                                            },
                                            {
                                                xtype: 'combo',
                                                fieldLabel: 'Plan Income Vat',
                                                id: 'PlanIncomeVatID',
                                                displayField: 'Name',
                                                valueField: 'Id',
                                                store: this.vatStore,
                                                allowBlank: true,
                                                name: 'PlanIncomeVatID'
                                            },
                                            {
                                                xtype: 'combo',
                                                fieldLabel: 'Plan Income Currency',
                                                id: 'PlanIncomeCurrencyID',
                                                displayField: 'Name',
                                                valueField: 'Id',
                                                store: this.currencyStore,
                                                allowBlank: true,
                                                name: 'PlanIncomeCurrencyID'
                                            },
                                            {
                                                xtype: 'combo',
                                                fieldLabel: 'Plan Income Pay Type',
                                                id: 'PlanIncomePayTypeID',
                                                displayField: 'Name',
                                                valueField: 'Id',
                                                store: this.payTypeStore,
                                                allowBlank: true,
                                                name: 'PlanIncomePayTypeID'
                                            }
                                        ]

                                }
                                ,
                                {
                                    // explicitly create a Container
                                    xtype: 'container',
                                    layout: {
                                        type: 'vbox'
                                    },
                                    width: 300,
                                    defaults: {
                                        labelWidth: 80,
                                        // implicitly create Container by specifying xtype
                                        xtype: 'datefield',
                                        flex: 1,
                                        style: {
                                            padding: '10px'
                                        }
                                    },
                                    items:
                                        [
                                            {
                                                xtype: 'checkbox',
                                                fieldLabel: 'Is SKC Financial',
                                                labelWidth: 150,
                                                id: 'IsSKCFinancial',
                                                allowBlank: true,
                                                name: 'IsSKCFinancial',
                                                blankText: 'Is SKC Financial'
                                            },
                                            {
                                                xtype: 'numberfield',
                                                fieldLabel: 'Plan Cost',
                                                id: 'PlanCost',
                                                allowBlank: true,
                                                minValue: 0,
                                                allowDecimals: true,
                                                decimalPrecision: 2,
                                                name: 'PlanCost',
                                                blankText: 'Plan Cost'
                                            },
                                            {
                                                xtype: 'combo',
                                                fieldLabel: 'Plan Cost Vat',
                                                id: 'PlanCostVatID',
                                                displayField: 'Name',
                                                valueField: 'Id',
                                                store: this.vatStore,
                                                allowBlank: true,
                                                name: 'PlanCostVatID'
                                            },
                                            {
                                                xtype: 'combo',
                                                fieldLabel: 'Plan Cost Currency',
                                                id: 'PlanCostCurrencyID',
                                                displayField: 'Name',
                                                valueField: 'Id',
                                                store: this.currencyStore,
                                                allowBlank: true,
                                                name: 'PlanCostCurrencyID'
                                            },
                                            {
                                                xtype: 'combo',
                                                fieldLabel: 'Plan Cost Pay Type',
                                                id: 'PlanCostPayTypeID',
                                                displayField: 'Name',
                                                valueField: 'Id',
                                                store: this.payTypeStore,
                                                allowBlank: true,
                                                name: 'PlanCostPayTypeID'
                                            }
                                        ]

                                }
                            ]

                    }

            ]
            ,taskStore: taskStore
        });

Error:

Uncaught ReferenceError: taskStore is not definedApp.js:462 App.launchext-all.js:22 Ext.cmd.derive.onBeforeLaunchext-all.js:22 Ext.define.onBeforeLaunchext-all.js:22 Ext.cmd.derive.onProfilesReadyext-all.js:22 Ext.cmd.derive.constructorext-all.js:22 gext-all.js:22 (anonymous function)ext-all.js:22 Ext.env.Ready.invokeext-all.js:22 Ext.env.Ready.doInvokeAllext-all.js:22 Ext.env.Ready.invokeAllext-all.js:22 Ext.env.Ready.unblockext-all.js:22 Ext.apply.triggerReadyext-all.js:22 Ext.apply.checkReadyext-all.js:22 Ext.apply.loadext-all.js:22 Ext.apply.requireext-all.js:22 Ext.apply.triggerReadyext-all.js:22 Ext.apply.checkReadyext-all.js:22 Ext.apply.onLoadSuccessext-all.js:22 Ext.Boot.Ext.Boot.b.notifyext-all.js:22 Ext.Boot.Ext.Boot.b.processLoadedEntriesext-all.js:22 Ext.Boot.Ext.Boot.j.notifyRequestsext-all.js:22 Ext.Boot.Ext.Boot.j.loadElement.qext-all.js:22 (anonymous function)
2.
when I use loadtask() task form not fill properly (picture)
Not select combo, but field name and combo name and id the same.

when I click Ok button and want to update task, not get extra fields data.

Please help me.

thx

Marcell
Attachments
gantt_error_01.png
gantt_error_01.png (250.6 KiB) Viewed 8699 times

User avatar
arcady
Core Developer
Core Developer
Posts: 2477
Joined: Wed Mar 20, 2013 6:57 am

Re: Gnt.plugin.TaskEditor

Post by arcady »

We need a runnable test case to assist you.

User avatar
marcl
Posts: 24
Joined: Fri Jun 06, 2014 11:52 am

Re: Gnt.plugin.TaskEditor

Post by marcl »

Hi,

Its a bad news, because this gantt is a little section in the ERP system.
Any suggestion? because in 2.x working properly this section.

thx

Marcell

User avatar
arcady
Core Developer
Core Developer
Posts: 2477
Joined: Wed Mar 20, 2013 6:57 am

Re: Gnt.plugin.TaskEditor

Post by arcady »

We don't need server side code. Just put your server load response into static *.json file.
Then you can use some of our examples code as a start point. As far as I understand all we need is the gantt panel w/ your customized task editor. So we could reproduce and debug the issue.

User avatar
marcl
Posts: 24
Joined: Fri Jun 06, 2014 11:52 am

Re: Gnt.plugin.TaskEditor

Post by marcl »

Hi,

I attached the files.

thx


Marcell

Post Reply