Migration from Ext Scheduler to Bryntum Scheduler

[nagasain]

Hello Guys,
With the recent update of yours which is the support for Vertical mode on Bryntum scheduler, I want to upgrade my existing application which uses Ext Scheduler, now because of the lag and inefficient performance of Ext Scheduler in Vertical mode, I want to migrate my app to Bryntum Scheduler.
Can you guys help me in migrating, is there any doc available which I can follow? or do I have to rebuild the app from scratch?

[abhi.srinu]

That would be very helpful in general to the whole community.
Did anyone try and successfully implement this? We integrated with ext extensively in overriding the resource columns and stores too.

[pmiklashevich]

Migration guides are coming out soon. Meanwhile you can download our trial and take a look at "examples" folder to see how new Scheduler application is supposed to be built. Refer to docs when it's needed: https://www.bryntum.com/docs/scheduler/

[pmiklashevich]

Guide is ready and will be available in the next nightly build and release. For early access I'm attaching it here:

ext-vanilla.md.zip

(5.29 KiB) Downloaded 125 times

[nagasain]

Thanks you for the guide @pmiklashevich. Would be really helpful if there is a guide for integrating bryntum scheduler in an Extjs application. We have used Extjs extensively for layouts and components, and we are looking to integrate bryntum scheduler. Any help would be much appreciated.

[pmiklashevich]

We don't have a guide about integration to ExtJS, but the idea is pretty simple. You can render new Scheduler into Ext.Panel body. We have a demo showing integration with ExtJS modern, but the same is true for ExtJS classic. You can find this demo in the distribution examples/extjsmodern https://bryntum.com/examples/scheduler/extjsmodern/

Please pay attention to examples/extjsmodern/Bryntum/SchedulerPanel.js file. It is Ext.Panel which is a wrapper for our component. When the panel is rendered scheduler instance is created and gets rendered into the panel's body.

me.on({
    painted : function() {
        me.getScheduler({
            appendTo : me.bodyElement.dom
        });
    },
    single : true
});

If you look at "getScheduler" function you'll see that different configs are merged before pass the final config to the new Scheduler constructor. Also please pay attention to exportedProperties config. It's required to define which configuration of the wrapper should be passed to the new Scheduler.

    exportedProperties: [
        'appendTo',
        'columns',
        'features',
        'viewPreset',
        'weekStartDay',
        'startDate',
        'endDate',
        'snapToIncrement',
        'snapRelativeToEventStartDate',
        'rowHeight',
        'barMargin',
        'forceFit',
        'createEventOnDblClick',
        'allowOverlap',
        'showRemoveEventInContextMenu',
        'enableEventAnimations',
        'disableGridRowModelWarning',
        'animateRemovingRows',
        'eventStore',
        'resourceStore',
        'assignmentStore',
        'dependencyStore',
        'eventRenderer'
    ],

To see how the wrapped is used please look at examples/extjsmodern/App/view/Main.js file. Pay attention to the wrapper's configuration:

        {
            title     : 'Bryntum Scheduler',
            xtype     : 'schedulerpanel',
            reference : 'schedulerPanel',
            flex      : 1,
            barMargin : 0,
            header    : {
                items: [{
                    xtype    : 'spinnerfield',
                    label    : 'Row height',
                    width    : '12.5em',
                    bind     : '{rowHeight}',
                    minValue : 20
                }, {
                    xtype   : 'button',
                    iconCls : 'b-fa b-fa-plus',
                    text    : 'Add Task',
                    ui      : 'action',
                    handler : 'addTask'
                }, {
                    xtype   : 'button',
                    iconCls : 'b-fa b-fa-plus',
                    text    : 'Add Time Range',
                    ui      : 'action',
                    handler : 'addTimeRange'
                }]
            },

            bind : {
                rowHeight : '{rowHeight}'
            },

            eventStore : {
                readUrl  : 'data/events.json',
                autoLoad : true
            },

            resourceStore : {
                readUrl  : 'data/resources.json',
                autoLoad : true
            },

            // features : {
            //     eventTooltip : true
            // },

            columns : [
                { text : 'Name', field : 'name', width : 130, locked : true }
            ],

            startDate  : new Date(2018, 3, 1, 6),
            endDate    : new Date(2018, 3, 1, 20),
            viewPreset : 'hourAndDay',

            eventRenderer : 'eventRenderer'
        }
    ]

"schedulerPanel" is Ext.Panel and panel doesn't have configurations like eventStore/resourceStore/startDate/endDate etc. But thanks to "exportedProperties" config these Panel configurations are passed to the new Scheduler.

One more thing which worth to mention is a sizing. The wrapper (Ext.Panel) uses "fit" layout, but new Scheduler is not an "item" of the panel. It's just a component which is rendered into panel's body. So we applied extjs css class 'x-layout-fit-item' to the new Scheduler manually to make it work according to fit layout behaviour.

I hope this info will help you to get the concept of this demo.

I've created a feature request to add a guide to our docs: https://app.assembla.com/spaces/bryntum/tickets/9061-add-a-guide-showing-integration-with-extjs/details

Cheers,
Pavel

[nagasain]

Thanks a lot Pavel, this will surely help us in getting started with.

[saki]

Just in the case you missed it, here is the Migration Guide and here is the Blog post based on the guide.