Scheudler component with Webpack/React

[dyzio163]

Hello

We want to use scheduler component in our Webpack/React architecture, but it's not acceptable for use include all ExtJS files as it's done in example - https://www.bryntum.com/blog/using-ext-gantt-with-react/

We've tried to use ExtJS webpack loader but we've ended up with

com.sencha.exceptions.BasicException: com.sencha.exceptions.ExNotFound: Required package "theme-triton" not found

.

Also we don't know if this loader support Scheduler component too.

Does anyone have experience with usage scheduler inside Webpack and could share some advices?

[Maxim Gorkovsky]

Hello.
Code paste suggest that you miss extjs packages when building application. You need to check your app/workspace and read through sencha CMD docs.

We didn't try to use scheduler inside webpack, but if you're trying to minify sources to only required ones, you just need to build your app. Take a look at this guide. Create app, follow guide to include packages, build with:

 sencha app build production

and you will get small bundle, that includes only required source code. For development purposes it is better to use approach from mentioned example.

[dyzio163]

Following your suggestion I created app using:

sencha generate app

Then I moved scheduler packages into project and modified app.json file and added following code to application:

Ext.define("RoomPlanner.view.main.Scheduler", {
    extend: "Sch.panel.SchedulerGrid",
    xtype: "configurationscheduler",
    requires : [
      'Sch.plugin.NonWorkingTime'
    ],
});

Now I have console errors:

errors.PNG (17.69 KiB) Viewed 5255 times

Any ideas what went wrong?

[wispoz]

first in this code:

Ext.define("RoomPlanner.view.main.Scheduler", {
    extend: "Sch.panel.SchedulerGrid",
    xtype: "configurationscheduler",
    requires : [
     'Sch.panel.SchedulerGrid',  //<---
      'Sch.plugin.NonWorkingTime'
    ],
});

seconde looks like Sch doesnt loaded, you must add package in app:

 {
        "name" : "MyApp",
        "theme": "bryntum-gantt-theme-neptune",

        ...

        "requires" : [
            "bryntum-scheduler"  //<-- here
        ],

        ...
    }

Third like Maxim said, you can generate app small bundle and include in webpack config.

[dyzio163]

I already have bryntum package in app.json file:

{
  "name": "RoomPlanner",
  "theme": "bryntum-scheduler-theme-base",
  "requires": [
        "font-awesome",
        "bryntum-scheduler"
    ]
 ...
}

I updated application code - still doesn't work...

[wispoz]

Can you provide webpack config?

[dyzio163]

Currently I'm not using webpack - i tried to integrate bryntum scheduler with default application generate by "sencha generate app" and i'm getting this error.

[pmiklashevich]

Hello! What version of Ext and Scheduler do you use? Do you use trial version of the scheduler? Please ensure that the 'package' folder exists into your workspace/app directory.

[wispoz]

For me works fine,
Steps:

1. mkdir scheduler
2. cd scheduler
3. sencha -sdk path_to_extjs_sdk generate app MyApp .  
4. Copy scheduler into packages directory
5. add in app.json, here: 
-------------------
    /**
     * Settings specific to classic toolkit builds.
     */
    "classic": {
        "requires": [
            "bryntum-gantt-pro"
        ],
        "js": [
            // Remove this entry to individually load sources from the framework.
            {
                "path": "${framework.dir}/build/ext-all-rtl-debug.js"
            }
        ]
    },
----------------------
6. and run sencha app build

[dyzio163]

Im using full version of scheduler 5.0.4 and Ext 6.2.1 trial version. I have "packages" folder with bryntum scheduler package in my app directory.