Access to gantt from the button in the drop down menu.

Support for v6.x of our Scheduling components


Locked
User avatar
ce.alicanonal
Posts: 88
Joined: Wed Sep 09, 2020 11:56 am

Access to gantt from the button in the drop down menu.

Post by ce.alicanonal »

hello i put a button in my dropdown menu. This button is the same as gantt.js. Its purpose is to send parameters to currendManager when I click. It works in gantt.js. I have defined gantt id, I get it from here. but I can't catch it from the drop down menu. Is there a way to capture it? I am sharing my code with you. This is my code in gantt.js:

Code: Select all

Ext.define('Gnt.examples.advanced.view.Gantt', {
    extend : 'Gnt.panel.Gantt',
    xtype  : 'advanced-gantt',

requires : [
    'Ext.grid.filters.Filters',
    'Ext.form.field.Text',
    'Sch.plugin.TreeCellEditing',
    'Sch.plugin.Pan',
    'Gnt.plugin.taskeditor.TaskEditor',
    'Gnt.plugin.taskeditor.ProjectEditor',
    'Gnt.plugin.DependencyEditor',
    'Gnt.plugin.Clipboard',
    'Gnt.plugin.ProgressLine',
    'Gnt.column.Sequence',
    'Gnt.column.Name',
    'Gnt.column.StartDate',
    'Gnt.column.EndDate',
    'Gnt.column.Duration',
    'Gnt.column.ConstraintType',
    'Gnt.column.ConstraintDate',
    'Gnt.column.PercentDone',
    'Gnt.column.Predecessor',
    'Gnt.column.ManuallyScheduled',
    'Gnt.column.AddNew',
    'Gnt.column.DeadlineDate',
    'Gnt.column.DragDrop',
    'Gnt.selection.SpreadsheetModel',
    /*  */
    'Gnt.examples.advanced.plugin.TaskArea',
    'Gnt.examples.advanced.plugin.TaskContextMenu',
    'Gnt.examples.advanced.field.Filter',
    'Gnt.examples.advanced.view.TaskEditorGeneralForm'
],

showTodayLine           : true,
loadMask                : true,
enableProgressBarResize : true,
showRollupTasks         : true,
rowHeight               : 30,
viewPreset              : 'weekAndDayLetter',

projectLinesConfig : {
    // Configure the gantt to mark project start dates w/ lines.
    // Options are:
    // 'start' - to show lines for start dates,
    // 'end' - to show lines for end dates,
    // 'both' - to show lines for both start and end dates.
    linesFor : 'start'
},

allowDeselect : true,

selModel : {
    type : 'gantt_spreadsheet',
    // The WBS column width
    rowNumbererHeaderWidth : 70
},

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

// Define properties for the left 'locked' and scrollable tree view
lockedViewConfig : {
    // Adds a CSS class returned to each row element
    getRowClass : function (rec) {
        return rec.isRoot() ? 'root-row' : '';
    }
},
itemId: 'gantt', 
tbar: [{
    text: 'Load Second Project',
    handler: btn => {
        var crudMgr = btn.up('#gantt').getCrudManager();

        crudMgr.transport.load.params.id = "Second project";
        crudMgr.load();
    }
}],
crudManager: {
    autoLoad: true,
    transport: {
        load: {
            method: 'GET',
            paramName: 'q',
            url: 'ganttcrud/load',
            params: {
                id: "Second project"
            }
        },
        sync: {
            method: 'POST',
            url: 'ganttcrud/sync'
        }
    }
},

   
// 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">{[Gnt.column.PercentDone.prototype.defaultRenderer(values.percentDone)]}%</span>' +
    '</div>',

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

// Uncomment to show labels above rollup elements
// rollupLabelField : 'Name',

plugins : [
    'advanced_taskcontextmenu',
    'scheduler_pan',
    {
        ptype : 'gantt_taskeditor',
        height              : 450,
        // tell editor to use our custom TaskEditorGeneralForm for the "General" tab
        taskFormClass : 'Gnt.examples.advanced.view.TaskEditorGeneralForm'
        // https://app.assembla.com/spaces/bryntum/tickets/6846
        // dependencyGridConfig : {
        //     useSequenceNumber : true
        // }
    },
    'gantt_projecteditor',
    'gridfilters',
    {
        ptype      : 'gantt_progressline',
        disabled   : true,
        statusDate : new Date(2017, 1, 6), // Optional
        id         : 'progressline'
    },
    {
        ptype : 'gantt_dependencyeditor',
        width : 320
    },
    {
        pluginId : 'taskarea',
        ptype    : 'taskarea'
    },
    {
        ptype        : 'scheduler_treecellediting',
        clicksToEdit : 2,
        pluginId     : 'editingInterface'
    },
    {
        ptype : 'gantt_clipboard',
        // data copied in raw format can be copied and pasted to gantt
        // data in text format is copied to system clipboard and can be pasted anywhere
        source : ['raw','text']
    },
    'gantt_selectionreplicator'
],

// Define the static columns
// Any regular Ext JS columns are ok too
columns : [
    {   xtype     : 'dragdropcolumn' },
    {
        xtype     : 'namecolumn',
        width     : 200,
        cls       : 'namecolumn',
        layout    : 'vbox',
        items     : {
            xtype : 'gantt-filter-field'
        }
    },
    {
        xtype     : 'startdatecolumn',
        width     : 130,
        dataIndex : 'StartDate',
        filter    : {
            type : 'date'
        }
    },
    {
        xtype     : 'enddatecolumn',
        width     : 130,
        dataIndex : 'EndDate',
        filter    : {
            type : 'date'
        }
    },
    {
        xtype     : 'durationcolumn',
        width     : 100
    },
    // Uncomment to try this column
    //{
    //    xtype : 'deadlinecolumn'
    //},
    {
        xtype     : 'constrainttypecolumn'
    },
    {
        xtype     : 'constraintdatecolumn'
    },
    {
        xtype     : 'percentdonecolumn',
        width     : 100,
        dataIndex : 'PercentDone',
        filter    : {
            type : 'number'
        }
    },
    {
        xtype             : 'predecessorcolumn'
        // https://app.assembla.com/spaces/bryntum/tickets/6846
        //useSequenceNumber : true
    },
    {
        xtype : 'addnewcolumn'
    }
],

eventRenderer : function (task, tplData) {
    var style,
        segments, i,
        result;

    if (task.get('Color')) {
        style = Ext.String.format('background-color: #{0};border-color:#{0}', task.get('Color'));

        if (!tplData.segments) {
            result = {
                // Here you can add custom per-task styles
                style : style
            };
        }
        // if task is segmented we cannot use above code
        // since it will set color of background visible between segments
        // in this case instead we need to provide "style" for each individual segment
        else {
            segments = tplData.segments;
            for (i = 0; i < segments.length; i++) {
                segments[i].style = style;
            }
        }
    }

    return result;
}
});

// Prevent Ext grid header key navigation reacting to arrow keys inside a text input
Ext.grid.header.Container.override({
    privates : {
        onFocusableContainerLeftKey     : function (e) {
            if (e.target.tagName.toLowerCase() !== 'input') {
                e.preventDefault();
                return this.moveChildFocus(e, false);
            }
        }, onFocusableContainerRightKey : function (e) {
            if (e.target.tagName.toLowerCase() !== 'input') {
                e.preventDefault();
                return this.moveChildFocus(e, true);
            }
        }
    }
});

and this is my drop down menu code :

Code: Select all

Ext.define('Sch.examples.lib.DetailsPanel', {
    extend        : 'Ext.panel.Panel',
    requires : [
       
], xtype : 'details', width : 400, title : 'Details', collapsible : true, collapsed : true, titleCollapse : true, bodyBorder : true, bodyPadding : 15, region : 'west', split : true, border : false, scrollable : true, cls : 'ks-cmp', tpl : '<pre data-src="{src}">{content}</pre>', tbar: [{ text: 'Load Second Project', handler: btn => { var crudMgr = btn.up('#gantt').getCrudManager(); crudMgr.transport.load.params.id = "Second project"; crudMgr.load(); } }], crudManager: { autoLoad: true, transport: { load: { method: 'GET', paramName: 'q', url: 'ganttcrud/load', params: { id: "Second project" } }, sync: { method: 'POST', url: 'ganttcrud/sync' } } } });

I'm sorry I'm constantly asking you, but I want to learn. :oops:


User avatar
ce.alicanonal
Posts: 88
Joined: Wed Sep 09, 2020 11:56 am

Re: Access to gantt from the button in the drop down menu.

Post by ce.alicanonal »

Is it possible to show the tasks with a null parent id, namely the main tasks, by returning with foreach here as a button?


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

Re: Access to gantt from the button in the drop down menu.

Post by mats »

Is it possible to show the tasks with a null parent id, namely the main tasks, by returning with foreach here as a button?

Sorry it is not clear what you mean, please try to explain a bit more.

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
ce.alicanonal
Posts: 88
Joined: Wed Sep 09, 2020 11:56 am

Re: Access to gantt from the button in the drop down menu.

Post by ce.alicanonal »

hello how can i solve the above problem? My problem is that I created a tbar in gantt.js and a button in it. I have defined itemId: 'gantt' to this gantt. and I added another button that will perform the same function as this button in a detail panel section. and when I click here, it gives an error. I guess I cannot use the itemId I defined in gantt.js in the details panel. Is there any way to use this? I'm adding a video, I'll be glad if you look.
https://youtu.be/ObiLdLGjAqU


User avatar
fabio.policeno
Core Developer
Core Developer
Posts: 171
Joined: Sun Jul 12, 2020 8:22 pm

Re: Access to gantt from the button in the drop down menu.

Post by fabio.policeno »

Hi ce.alicanonal,

You are having problem to get your gantt reference, this is more about Ext JS framework than Bryntum product. I would recommend you create your project using MVVM pattern and then use reference config to identify your gantt instance as best practice and then on your ViewController you can use method lookup to get the gantt instance.

Here you can read more about how to get the instance by reference config and how to use MVVM with examples: https://docs.sencha.com/extjs/7.2.0/guides/application_architecture/application_architecture.html

PS: On that previous example created was used itemId just to be a easy and short example to understand it didactically.

Fabio Jr. Policeno
Core Developer


User avatar
ce.alicanonal
Posts: 88
Joined: Wed Sep 09, 2020 11:56 am

Re: Access to gantt from the button in the drop down menu.

Post by ce.alicanonal »

sorry I did not understand anything from these documents.

where does this part come from?

Code: Select all

var crudMgr = btn.up('#gantt').getCrudManager();

Can you explain with a short example how I can apply this?


User avatar
ce.alicanonal
Posts: 88
Joined: Wed Sep 09, 2020 11:56 am

Re: Access to gantt from the button in the drop down menu.

Post by ce.alicanonal »

Since I don't understand the MVC logic in Ext js, so the code part is too complex, I did a trick. I noticed that the button I created in GanttSecondaryToolbar.js saw the id field in Gantt.js and changed GanttSecondaryToolbar.js. I may not use that part. now it looks below how can i get it left or right?
I added video and code for you, I would be glad if you review.

main viewport :

Code: Select all

Ext.define("Gnt.examples.advanced.view.MainViewport", {
    extend: 'Ext.Viewport',
    alias : 'widget.advanced-viewport',

requires: [
    'Gnt.examples.advanced.view.MainViewportController',
    'Gnt.examples.advanced.view.MainViewportModel',
    'Gnt.examples.advanced.view.GanttSecondaryToolbar',
    'Gnt.examples.advanced.view.ControlHeader',
    /*  */
    'Gnt.examples.advanced.view.Gantt'
],

viewModel : 'advanced-viewport',
controller: 'advanced-viewport',

layout: 'border',

initComponent: function () {
    this.items = [
        {
            xtype : 'container',
            region: 'center',
            layout: 'border',
            items : [
                /*  */
                {
                    xtype      : 'advanced-gantt',
                    region     : 'center',
                    reference  : 'gantt',
                    crudManager: this.crudManager,
                    startDate  : this.startDate,
                    endDate    : this.endDate,
                    header     : Gnt.panel.Timeline ? null : {xtype: 'controlheader'},
                    bbar       : {
                        xtype: 'details' 
                    }
                }
            ]
        },
        {
            xtype  : 'details'
        }
    ];

    this.callParent(arguments);
}
});

GanttSecondaryToolbar :

Code: Select all

Ext.define('Gnt.examples.advanced.view.GanttSecondaryToolbar', {
    extend      : 'Ext.panel.Panel',
    xtype       : 'details',
    width: 400,

title: 'Gorevlerim',
collapsible: true,
collapsed: true,
titleCollapse: true,
bodyBorder: true,
bodyPadding: 15,
region: 'east', 
split: true,
border: false,
scrollable: true,
cls: 'ks-cmp',
tpl: '<pre data-src="{src}">{content}</pre>',

tbar: [{
    text: 'Load Second Project',
    itemId: 'fooGrid',
    handler: btn => {
        const crudMgr = btn.up('#gantt').getCrudManager();
        if (crudMgr.transport.load.params.id === "Second project") {
            crudMgr.transport.load.params.id = "Main project";
        } else {
            crudMgr.transport.load.params.id = "Second project";
        }
        crudMgr.load();
    }
}]
});

Detail panel (
this part does not work. I want it to be left or right like this.) :

Code: Select all

Ext.define('Gnt.examples.advanced.view.DetailsPanel', {
    extend: 'Ext.panel.Panel',
  
identifier: 'gantt', xtype : 'details', width: 250, height:800, title : 'Details', collapsible : true, collapsed : true, titleCollapse : true, bodyBorder : false, bodyPadding : 200, region : 'west', split : true, border : false, scrollable : true, cls : 'ks-cmp', tpl : '<pre data-src="{src}">{content}</pre>', tbar: [{ text: 'Load Second Project', dock:top, handler: btn => { var crudMgr = btn.up('#gantt').getCrudManager(); crudMgr.transport.load.params.id = btn.text; crudMgr.load(); } }], crudManager: { autoLoad: true, transport: { load: { method: 'GET', paramName: 'q', url: 'ganttcrud/load', params: { id: "Second project" } }, sync: { method: 'POST', url: 'ganttcrud/sync' } } } });

https://youtu.be/v1LvipTFalw


User avatar
fabio.policeno
Core Developer
Core Developer
Posts: 171
Joined: Sun Jul 12, 2020 8:22 pm

Re: Access to gantt from the button in the drop down menu.

Post by fabio.policeno »

Hi ce.alicanonal,

I just found an runnable example that you can edit/run live. You can play there and is easy short example to understand how you reference your instance (gantt instance or any other component instance): https://fiddle.sencha.com/#fiddle/3222&view/editor

For more details and Ext JS questions specifically, I would suggest you ask on sencha forum or stackoverflow forums.

Fabio Jr. Policeno
Core Developer


User avatar
ce.alicanonal
Posts: 88
Joined: Wed Sep 09, 2020 11:56 am

Re: Access to gantt from the button in the drop down menu.

Post by ce.alicanonal »

hello fabio thank you very much for help. I want to ask a question about the last gantt. I want to remove the units fields in these 2 pictures. How can I achieve this so they don't just show up in the image?

Attachments
units.png
units.png (10.6 KiB) Viewed 318 times
unit.png
unit.png (6.39 KiB) Viewed 318 times

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

Re: Access to gantt from the button in the drop down menu.

Post by mats »

@ce.alicanonal Please follow the rules, just one question per thread, please start a new one.

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

Locked