Guide applies to: modern

Using npm Packages Inside an Ext JS npm Application

1. Package Installation

Installing additional, non-Sencha npm packages is no different than the normal npm package installation processes and parameters. For example:

npm install moment

This will install the momentjs package inside the node_modules folder and updated your package.json.

2. Package Exposure

To make the newly installed package available to the ExtJS framework, we will require the package and set is an Ext global property. This should be done inside the generated index.js located at the root of your project. If you open index.js you’ll see the following examples:

  1. //this file exists so the webpack build process will succeed
  2. App._find = require('lodash.find');

To avoid naming conflicts with existing ExtJS properties, prepend your package name with x. Using the momentjs package in the previous examples, our require statement would look like this:

  1. App.xMoment = require('moment');

3. Package Usage

Now that our package is globaly available through ExtJS, access to the package is straightforward. Use the App.x<PackageName/> format to access and use your package. The appropriate package members are now exposed for use anywhere inside your application. Wrapping up our example with momentjs, here is how to use the format method of a moment instance:

  1. App.xMoment().format('LLLL')