Run Calendar failed with Ext JS 6.7.0

[lijuan.zhang]

Hi team,

I tried to run the calendar-for-ext-js-2.0.6, but the production can not be run in not only debug environment and but also release environment. Please refer to the attachment.

The version information
-Ext Js version: 6.7.0
-Calendar-for-ext-js: 2.0.6

I referred to the next guide.
https://www.bryntum.com/docs/calendar-for-extjs/#!/guide/sencha_cmd

Thanks for your help.

[pmiklashevich]

Hello,

Please do not attach xlsx files for hosting text and pictures. You can upload pictures here, and paste errors as plain text and wrap it in a [CODE][/CODE] block. Based on the screenshot you attached to the excel file, I see you're trying to use Calendar and TaskBoard together. I see you included thin Calendar bundle and full TaskBoard bundle assuming TaskBoard holds the full Scheduler. But that is not true. Both Calendar and TaskBoard rely on Scheduler and include some of the classes Scheduler has. To make Calendar and TaskBoard work together you need to include full Scheduler bundle, thin Calendar bundle, and thin TaskBoard bundle. With Calendar 2.0.6 we recommend to use TaskBoard 2.0.25 and Scheduler 6.1.1. Please try it and let us know if it works for you. If not, please prepare a zip file containing your demo-project excluding ExtJS and our sources. Just keep paths and we will copy corresponding sources to check it.

Best,
Pavel

[lijuan.zhang]

Thanks for your prompt reply.

I have two questions.

1. I only have Calendar 2.0.6 and TaskBoard 2.0.25. How can I get Scheduler 6.1.1?
2. Could you tell how to include full Scheduler bundle, thin Calendar bundle, and thin TaskBoard bundle in release environment, not debug environment. Could you give me the configuration guide?

Thanks for your help.

[pmiklashevich]

I only have Calendar 2.0.6 and TaskBoard 2.0.25. How can I get Scheduler 6.1.1?

You need to buy a license and download the product from customer zone.

Could you tell how to include full Scheduler bundle, thin Calendar bundle, and thin TaskBoard bundle in release environment, not debug environment. Could you give me the configuration guide?

The simplest option is to include corresponding bundles in index.html

    <script src="../../sch-all-debug.js?ver=%VERSION%" type="text/javascript"></script>
    <script src="taskboard-all-thin-debug.js" type="text/javascript"></script>
    <script src="bryntum-calendar-thin-debug.js" type="text/javascript"></script>

You can check out this Scheduler demo which shows Calendar, TaskBoard, and Scheduler working together:
https://www.bryntum.com/examples/scheduler-for-extjs/kitchensink/#examples/schedulingsuite
Locally you can find it here: scheduler-6.1.1/examples/schedulingsuite/index.html

For release just use bundles without "-debug" prefix in the name. They are minified and obfuscated, so can be used for production.

If you build Sencha Cmd application, please follow this guide:
https://www.bryntum.com/docs/scheduler-for-extjs/#!/guide/sencha_cmd
Instead of Gantt, please include Taskboard package in the "Using the Scheduler with other Bryntum products" section:

        "requires": [
            "bryntum-scheduler"
        ],

    ...

    "classpath": [
        "packages/local/bryntum-taskboard/build/bryntum-taskboard-thin-debug.js",
        "packages/local/bryntum-calendar/build/bryntum-calendar-thin-debug.js",
        ...
    ]

For release you need to compile the code using:

sencha app build

https://docs.sencha.com/cmd/6.7.0/guides/extjs/cmd_app.html

Cheers!

[lijuan.zhang]

Thanks very much for your reply.

For release I followed your guide to modified the app.json source as following.

"classpath": [
    "app",
    "packages/local/bryntum-taskboard/build/bryntum-taskboard-thin.js",
    "packages/local/bryntum-taskboard/src/Kanban/plugin/DragSelector.js"
],
...
"requires": [
    ...
    "bryntum-calendar"
],

When the product is run,
there 's an error occurred. Please refer the attachment error1.png. It seems that the calendar widget can not be found by the error details. So I added the bryntum - calendar.js reference into the app.json source as following.

[code]
"classpath": [
    "app",
    "packages/local/bryntum-calendar/build/bryntum-calendar.js",
    "packages/local/bryntum-taskboard/build/bryntum-taskboard-thin.js",
    "packages/local/bryntum-taskboard/src/Kanban/plugin/DragSelector.js"
],
...
"requires": [
    ...
    "bryntum-calendar"
][/code]

Then the previous error is cleared and the calendar can be showed, but there's Ext JS error occurred. Please refer the attachment error2.png.
I am afraid if app.json setting is correct. I think if "bryntum-calendar" is added in "requires", "packages/.../bryntum-calendar.js" need not be added in "classpath".
Could you help me or give me some advices?

[pmiklashevich]

Where is bryntum-scheduler in your configuration? As I said above you need to include bryntum-scheduler, calendar-thin, taskboard-thin. Please use debug versions until it starts working for you, otherwise error messages are not clear. When everything works, just remove"-debug" and it should work the same way.

[pmiklashevich]

Hello,

It is possible to integrate TaskBoard into Calendar without involving Scheduler package. This can be done due to the fact that Calendar extends most of Scheduler classes. Actually Calendar shows Scheduler in Day and Week view, so Scheduler works behind the scene.

We have updated the sencha cmd guide to make all steps clear. I'll attach the readme file here, so you can check it locally. Please read "Making the test application" and "Integrating TaskBoard into Calendar app" sections.

README.md.zip

(3.8 KiB) Downloaded 3 times

At the end you should have a working Sencha CMD application showing Calendar and TaskBoard.

To make it easy to get started, I'll attach a zip containing the project. But I have to remove Ext and Bryntum libraries:

# / ext
# / packages / local / bryntum - calendar
# / packages / local / bryntum - taskboard
# / resources / calendar / css /
# / resources / taskboard / css

calendar_taskboard_cmd.zip

(83.83 KiB) Downloaded 2 times

It works with no errors for me in both development and production. You can run sencha app build to compile it. Please let me know if it works for you.

Best wishes,
Pavel

[lijuan.zhang]

Hi,

Many thanks for your help.

Your guide seems a bit complex, we solved the problem by add missing Ext JS class in TaskBoard Component.

requires:
     [
        'Ext.grid.NavigationModel',
        'Ext.layout.Context',
        ...
	],
        

Thanks again.