Use Moment.js in extjs project

Question

I'm developing an Extjs project using 6.5.2 version and modern toolkit, i want to use https://momentjs.com/ package but i couldn't import the node_dependency. The Momentjs page has the downloads or install methods, but if i download the code, where i want to use whatever method, this throw an exception and if i install the package using 'npm install moment --save' command, i don't know how to import and call it.

Someone can help me importing this dependency in extjs.

score 2 · Accepted Answer · answered Aug 31 '18 at 13:34

@Carlos You can do by adding script tag in the index.html file as suggested by Akrion.

Another way - Inside app.json file you can add following inside js [] -

"js":[
      {
        "path": "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js",
        "remote": true
      }
]

Once this is added then you need to do sencha app refresh or sencha app build.

Then in the application code you can use it like following -

var welcomeText = 'Welcome to Sencha Fiddle! Today is: '+ moment(new Date()).format("MM-DD-YYYY");
Ext.Msg.alert('Welcome message',welcomeText);

Thanks, it's better answer without handle the index and using the app.json — Carlos Ramirez, Aug 31 '18 at 22:53

score 0 · Answer 2 · answered Sep 05 '18 at 19:18

Another approach would be to Ext.mixin.Mashup mixin.

This mixin allows users to easily require external scripts in their classes. This load process delays application launch (Ext.onReady) until all such scripts are loaded ensuring that your class will have access to its required scripts from the start.

So you could have an Moment.js adapter class, like so:

Ext.define('MomentjsAdapter', {
    mixins: ['Ext.mixin.Mashup'],

    requiredScripts: [
        'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js'
    ],
    ...
});

I like this very much, because you keep the external dependency close to the place where it's used. Which is very handy when you might want to remove the dependency or reuse it in a different place/project.

Use Moment.js in extjs project

2 Answers2