Guide applies to: modern

Getting started with Ext JS Enterprise Components using npm

This guide covers adding one of the Ext JS add-on components to your application using npm.

Add-on ComponentsConfig Name <addon-package>npm Package NameDescription
Standard Add-on Components
AMFamf@sencha/ext-amfAMF Direct support
Chartscharts@sencha/ext-chartsSencha charts and visualizations
Corecore@sencha/ext-coreSencha Core
Font Awesomefont-awesome@sencha/ext-font-awesomePackage wrapper for Font Awesome
Font-extfont-ext@sencha/ext-font-extExtra font icons
Font-iosfont-ios@sencha/ext-font-iosiOS font icons
Font-pictosfont-pictos@sencha/ext-font-pictosPackage wrapper for Pictos Web Font
Googlegoogle@sencha/ext-googleGoogle APIs
Soapsoap@sencha/ext-soapSOAP Data Support
UXux@sencha/ext-uxUser extensions.
 
Enterprise Edition Add-on Components
Calendarcalendar@sencha/ext-calendarEvent management.
Exporterexporter@sencha/ext-exporterData export tool.
D3 Adapterd3@sencha/ext-d3Data visualization.
Pivot Gridpivot@sencha/ext-pivotData dimensions visualization.
Pivot D3pivot-d3@sencha/ext-pivot-d3D3 adapter for the pivot grid.
Pivote Localepivot-locale@sencha/ext-pivot-localeData analytics.
Froala Editorfroala-editor@sencha/ext-froala-editorWYSIWYG HTML Editor

Requirements

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:

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

Specific Example:

  1. 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:

  1. "requires": [
  2.     "font-awesome",
  4.     // Declare the add-on Component package here
  5.     "calendar"
  6. ],

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:

  1. {
  2.     title: 'Home',
  3.     iconCls: 'x-fa fa-home',
  4.     layout: 'fit',
  5.     items: [{
  6.         xtype: 'calendar'
  7.     }]
  8. }

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.

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

Example before:

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

Example after:

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