Using Ext JS Packages with npm

This guide covers using Ext JS packages in the npm environment. We will guide you through creating a new ExtJS workspace with a sample Ext JS package which will be shared by an Ext JS application as a node module.

Create an Ext JS workspace and configure for NPM

This step covers creating an Ext JS workspace and package and configuring it for sharing with an npm application. In this example, we are creating only one Ext JS package for sharing, but just as with all Ext JS applications, mulitple packages can be created and shared.

Create a folder for your shared Ext JS package.
```
$ mkdir my_shared_packages
```
Change directory to the created folder and initailize the npm package.json configuration. This will allow the npm application to use the shared Ext JS packages.
```
 $ cd my_shared_packages
 $ npm init
```
and select the defaults. For this example, we will give the package name @myorg/mysharedpackages.

The generated package.json should look like this:

 {
   "name": "@myorg/mysharedpackages",
   "version": "1.0.0",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC"
 }

In this same folder, generate an Ext JS workspace for the shared Ext JS packages. Simply run:

$ sencha generate workspace . or $ sencha -sdk /path/to/ext-n.n.n generate workspace .

This section covers using the shared Ext JS package created above in your application.

Using Sencha Cmd, generate a template package and name it CommonUtils.

$ sencha generate package CommonUtils

See more info on creating Ext JS packages..

Now, add some common utility code we can use in our application. In the folder packages/local/CommonUtils/src create a file AlertUtil.js with this code:

   Ext.define('CommonUtils.alerts', {
       singleton: true,
       alert: function (msg) {
           Ext.Msg.alert('Alert', msg);
       }
   });

Add a shared override in the folder packages/local/CommonUtils/overrides and create a file named MyGridOverride.js with this code:

   Ext.define('CommonUtils.grid.Grid', {
       override: 'Ext.grid.Grid',
       constructor: function() {
         var me = this;
         me.callParent();
         console.log("my override works ...");
       }
   });

Your current directory structure for your ExtJS workspace should look like this:

Use the npm Package in an Ext JS application

In this section, we will create an open tools Ext JS application, configure it to make use of the shared Ext JS package and incorporate those package routines into the open tools Ext JS application.

Create a Ext JS npm project run ext-gen app -a or use an existing one.
In the application directory, open your application and update the dependencies block in the applications package.json to include your new shared dependency:

"@myorg/mysharedpackages": "file:///path/to/the/folder/above/named/my_shared_packages"

Once you add the dependency it should look something like this:
Run npm install in the application directory. This will add the module @myorg/mysharedpackages to the node_modules directory. You can verify that the install ran correctly by viewing the contents of the node_modules directory to ensure that the package contents have been copied from the Ext JS workspace.
```
   $ ls node_modules/@myorg
   mysharedpackages
```
The next step is to add the node module directory to the class search path in the Ext JS application workspace. Edit the workspace.json file and add the directory to the start of the “dir” property of the “packages” configuration:

"dir": "${workspace.dir}/node_modules/@myorg/mysharedpackages/packages/local,

Once you add the package to the workspace.json dir property it should look something like this:
We can now add the Ext JS package name to the requires array in your application’s manifest file (app.json):
```
   "requires": [
     "font-awesome",
     "CommonUtils"
   ],
```
In order to use the shared package in your application it must be added to the requires array. In the applications view file my-app/app/desktop/src/view/personnel/PersonnelView.js add the shared package name to the requires array:

requires: ['Ext.grid.rowedit.Plugin', 'CommonUtils.alerts'],
After it’s been required in the view it can be used in the view’s controller. In the file my-app/app/desktop/src/view/personnel/PersonnelViewController.js add CommonUtils.alerts.alert("common alert works"); to the function onEditCancelled.

Once you added the code to your controller it should look something like this:
```
 Ext.define('MyExtGenApp.view.personnel.PersonnelViewController', {
   extend: 'Ext.app.ViewController',
   alias: 'controller.personnelviewcontroller',
   onEditCancelled: function (editor, value, startValue, eOpts) {
       CommonUtils.alerts.alert("common alert works");
   }
 });
```
Note: There is an error with the generated application for this view controller. Please remove the existing content of the onEditCancelled method before adding the alert message.
Verify the added code works in the onEditCancelled function by starting the application with sencha app watch in the root of the project and going to the applications personnel page. Try double clicking on a grid cell to launch the row editor, then click the cancel button. You will see the shared package alert.
You can also verify the Ext JS grid override works by opening up dev tools and finding the console output from the override.

Share Ext JS Packages

Using Ext JS Packages with npm

Create an Ext JS workspace and configure for NPM

Generate Simple Package for sharing with NPM application

Use the npm Package in an Ext JS application