Guide applies to: modern

Ext JS npm Packages

This guide covers the Ext JS npm packages available.

Repository Dashboard

• https://npm.sencha.com

Repository Login

If you are a TRIAL customer

The Ext JS 30-day trial packages are available to install from public npm. Install the latest Ext JS version using the following command and skip to Step 2.

$ npm install -g @sencha/ext-gen

If you are an ACTIVE customer

Ext JS and all related commercial packages are hosted on Sencha’s private npm registry. Login to the registry using the following command which configures npm to download packages in the @sencha scope from Sencha’s registry.

Username Note:

The email and password used during support portal activation (after license purchase) will be used to login to Sencha’s NPM repo. The username is the same as the email used, however, the @ character is replaced with ‘..’ two periods. For example [[email protected]](https://docs.sencha.com/cdn-cgi/l/email-protection) converts to username: name..gmail.com

$ npm login --registry=https://npm.sencha.com/ --scope=@sencha

$ npm install -g @sencha/ext-gen

Repository Packages

These packages come with Ext JS 7.x. All of them use the same @sencha scope.

Requirements

• npm Mobile Desktop Application

Add the Add-on Component to your Project

Step 1: Install the Add-on npm Dependency

This will add it to the add-on dependency in the package.json.

Example:

npm install --save @sencha/ext-<addon-package>

Specific Example:

npm install --save @sencha/ext-calendar

Step 2: Declare the Package in app.json

In the project’s app.json requires property, declare the new package dependency calendar or whatever the package config name is.

Example app.json:

"requires": [
    "font-awesome",
    // Declare the add-on Component package here
    "calendar"
],

Step 3: Add the Add-on Component to a View

In this step, add the enterprise component to one of the applications views. In this example, the calendar package is added to the Main.js view.

Example:

{
    title: 'Home',
    iconCls: 'x-fa fa-home',
    layout: 'fit',
    items: [{
        xtype: 'calendar'
    }]
}

Step 4: Try it out

Start up your your web server and reload the web page. Verify the new component renders.

What’s Next

Now you’re ready to move to the next stage of using all the Ext JS Components.

Reference

For Workspaces: Declare Packages in the Workspace

In some projects with a workspace configuration, configure the packages.

In workspace.json append the dir variable under packages with new add-on package location.

${framework.dir}/../ext-<addon-package>

Example before:

"packages": {
"dir": "${workspace.dir}/packages”,

Example after:

"packages": {
"dir": "${workspace.dir}/packages,${framework.dir}/../ext-calendar",