How to use fetchOptions with headers for populating data into eventStore?

Our blazing fast Grid component built with pure JavaScript
User avatar
mats
Core Developer
Core Developer
Posts: 13837
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: How to use fetchOptions with headers for populating data into eventStore?

Post by mats » Wed May 15, 2019 2:57 pm

Any class that mixes in 'Events' can be observed as you see here: https://bryntum.com/docs/scheduler/#Common/mixin/Events

Code: Select all

store.on({ load : () => { ... })
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
prh7
Posts: 24
Joined: Mon Apr 29, 2019 10:52 am

Re: How to use fetchOptions with headers for populating data into eventStore?

Post by prh7 » Wed May 15, 2019 3:23 pm

I tried doing something like below but it doesn't log anything:

Code: Select all

// we import scheduler.umd for IE11 compatibility only. If you don't use IE import:
// import { Grid } from 'bryntum-scheduler';
import { Grid } from 'bryntum-scheduler/scheduler.umd';

export default class UnplannedGrid extends Grid {
    static get defaultConfig() {
        return {
            features: {
                stripe: true,
                sort: 'name'
            },
            columns: [
                {
                    text: 'Unassigned tasks',
                    flex: 1,
                    field: 'name',
                    htmlEncode: false,
                    renderer: data => `<i class="${data.record.iconCls}"></i>${data.record.name}`
                },
                {
                    text: 'Duration',
                    width: 100,
                    align: 'right',
                    editor: false,
                    field: 'duration',
                    renderer: data => `${data.record.duration} ${data.record.durationUnit}`
                }
            ],
            rowHeight: 50
        };
    }

    construct(config) {
        super.construct(config);

        this.eventStore.on({
            // When a task is updated, check if it was unassigned and if so - move it back to the unplanned tasks grid
            update: ({ record, changes }) => {
                console.log()
                if ('resourceId' in changes && !record.resourceId) {
                    this.eventStore.remove(record);
                    this.store.add(record);
                }
            },
            load: ({ data, response, json}) => {
                debugger;
                console.log(data, response, json);
            },
            thisObj: this
        });
    }
}

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

Re: How to use fetchOptions with headers for populating data into eventStore?

Post by mats » Wed May 15, 2019 3:44 pm

Are you using the CrudManager to load data? Then that's where the listener should go. Which example are you using as a base?
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
prh7
Posts: 24
Joined: Mon Apr 29, 2019 10:52 am

Re: How to use fetchOptions with headers for populating data into eventStore?

Post by prh7 » Wed May 15, 2019 3:51 pm

I am using https://www.bryntum.com/examples/schedu ... index.html as base.

The Grid React component inside components folder from the above example doesn't use CrudManager. the code looks like below:

Code: Select all

/**
 * @author Saki
 * @date 2019-03-08 09:19:25
 * @Last Modified by: Saki
 * @Last Modified time: 2019-03-08 10:31:00
 *
 * Grid with unplanned tasks. This is just a react wrapper.
 */
// libraries
import React, { Component } from 'react';

// our stuff
import UnplannedGrid from '../lib/UnplannedGrid.js';
import Task from '../lib/Task.js';

class Grid extends Component {

    componentDidMount() {
        this.unplannedGrid = new UnplannedGrid({
            appendTo   : 'unplannedContainer',
            eventStore : this.props.eventStore,
            store: {
                modelClass: Task,
                autoLoad: true,
                readUrl: 'http://127.0.0.1:8081/rest/',
                fetchOptions: {
                    method: 'POST',
                    body: 'something'
                },
                headers: {
                    'Content-Type': 'application/json'
                }
            }
        });
    } // eo function componentDidMount

    render() {
        return (<div id="unplannedContainer"></div>);
    } // eo function render

}; // eo class Grid

export default Grid;

// eof

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

Re: How to use fetchOptions with headers for populating data into eventStore?

Post by mats » Wed May 15, 2019 3:54 pm

You'll create a (slight) race condition by doing it the way you do, loading of event is done by CrudManager. Look at the sources, try listening instead on the CrudManager:

Content.js

Code: Select all

crudManager={{
                    autoLoad   : true,
                    eventStore : eventStore,
                    transport  : {
                        load : {
                            url : 'data/data.json'
                        }
                    }
                }}
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
mats
Core Developer
Core Developer
Posts: 13837
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: How to use fetchOptions with headers for populating data into eventStore?

Post by mats » Wed May 15, 2019 3:55 pm

Or try listen to 'refresh' on the eventStore. https://bryntum.com/docs/scheduler/#Com ... nt-refresh
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
prh7
Posts: 24
Joined: Mon Apr 29, 2019 10:52 am

Re: How to use fetchOptions with headers for populating data into eventStore?

Post by prh7 » Wed May 15, 2019 5:17 pm

I managed to do it this way below:

Grid.js

Code: Select all

import React, { Component } from 'react';
import UnplannedGrid from '../lib/UnplannedGrid';
import Task from '../lib/Task';

class Grid extends Component {

    componentDidMount() {
        this.unplannedGrid = new UnplannedGrid({
            appendTo: 'unplannedContainer',
            eventStore: this.props.eventStore,
            store: {
                modelClass: Task,
                autoLoad: true,
                readUrl: 'http://127.0.0.1:/rest',
                fetchOptions: {
                    method: 'POST',
                    body: 'something'
                },
                headers: {
                    'Content-Type': 'application/json'
                },
                listeners: {
                    load(response) {
                        const task = 12;
                        const workStatus = 34;

                        const filteredResponse = response.json.itemList.filter((item, index) => {
                            const itemFields = item.fields;
                            const requiredField = itemFields.filter((item) => (item.id === workStatus && item.options[0].value.name === "Not planned"));

                            if (Object.keys(requiredField).length > 0) return item;
                        });
                        const normalizedData = filteredResponse.map((item) => {
                            return {
                                "id": item.itemId,
                                "name": item.fields.find(field => field.id === task).options[0].value,
                                "duration": 4,
                                "durationUnit": "h",
                                "fields": item.fields
                            };
                        });
                        this.props.eventStore.add = normalizedData;
                        console.log(response);
                    }
                }
            }
        });
    }

    render() {
        return <div id="unplannedContainer"/>;
    }
}

export default Grid;
Only problem is that I cannot add data inside normalizedData variable to the eventStore from the response. Do you know anything about it ?

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

Re: How to use fetchOptions with headers for populating data into eventStore?

Post by mats » Wed May 15, 2019 10:28 pm

Not really following here. You're loading the unplanned Grid data but want to load it into the eventStore? `eventStore.add` is a method, so you can't do

Code: Select all

 eventStore.add  = foo;
But to add to the eventStore call add like:

Code: Select all

eventStore.add([ ... ]);
Docs: https://bryntum.com/docs/scheduler/#Sch ... nction-add
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
prh7
Posts: 24
Joined: Mon Apr 29, 2019 10:52 am

Re: How to use fetchOptions with headers for populating data into eventStore?

Post by prh7 » Thu May 16, 2019 1:05 pm

I resolved my issue by doing

Code: Select all

response.source.data = normalizedData;
. Let me know if this is not a good solution. Thank you for the help.

Post Reply