Guide applies to: modern

Getting Started using Exft JS Add-on Components using Cmd

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

Requirements

Download the Ext JS Addons Zips

There are two zip files you need to download. First download the Ext JS SDK Zip. Secondly download the Ext JS Addons zip.

Zip NamePath to Add-onsDescription
Ext JS SDK[zip]/packages/This zip contains the Ext JS SDK and standard Addons components
Ext Premium Addons[zip]/packages/The Premium add ons include Calendar, Exporter, D3, Pivot, and Froala editor components

Start a Trial

If you already signed up for the trial you can skip this step. This sign up form sends you an email with the download links.

Download Zips from the Support Portal

Existing customers can log into the portal’s downloads section and download both zips.

Add the Add-on Component to your Project

Step 1: Extract the zip

Open the zip and extract the resources into a folder that you can keep as a reference to Ext JS resources.

Step 2: Copy the Add-on package

In this step, you copy the add-on package to your project. And in this example we will use the Calendar add-on as the example package.

  • In your project root, create a folder called [project]/packages/local.
  • Copy the add-on package [zip]/calendar to [project]/packages/local/calendar.

Step 3: Declare the Package in app.json

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

Example app.json:

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

Specific Example of app.json:

  1. {
  2.     "name": "MyApp",
  3.     "namespace": "MyApp",
  4.     "version": "1.0.0.0",
  5.     "framework": "ext",
  6.     "toolkit": "modern",
  7.     "theme": "theme-material",
  9.     /**
  10.      * The list of required packages (with optional versions; default is "latest").
  11.      *
  12.      * For example,
  13.      *
  14.      *      "requires": [
  15.      *          "charts"
  16.      *      ]
  17.      */
  18.     "requires": [
  19.         "font-awesome",
  21.         // Declare the add-on components package here
  22.           "calendar"
  23.     ],
  25. //...

Step 4: 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 will be 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. }

Specific Example [cmd_project]/app/view/main/Main.js:

  1. /**
  2.  * This class is the main view for the application. It is specified in app.js as the
  3.  * "mainView" property. That setting causes an instance of this class to be created and
  4.  * added to the Viewport container.
  5.  */
  6. Ext.define('MyApp.view.main.Main', {
  7.     extend: 'Ext.tab.Panel',
  8.     xtype: 'app-main',
  10.     requires: [
  11.         'Ext.MessageBox',
  12.         'Ext.layout.Fit'
  13.     ],
  15.     controller: 'main',
  16.     viewModel: 'main',
  18.     defaults: {
  19.         tab: {
  20.             iconAlign: 'top'
  21.         }
  22.     },
  24.     tabBarPosition: 'bottom',
  26.     items: [
  27.         // TODO - Replace the content of this view to suit the needs of your application.
  28.         {
  29.             title: 'Home',
  30.             iconCls: 'x-fa fa-home',
  31.             layout: 'fit',
  32.             // The following grid shares a store with the classic version's grid as well!
  33.             items: [{
  34.                 xtype: 'calendar'
  35.             }]
  36.         },{
  37.             title: 'Users',
  38.             iconCls: 'x-fa fa-user',
  39.             bind: {
  40.                 html: '{loremIpsum}'
  41.             }
  42.         },{
  43.             title: 'Groups',
  44.             iconCls: 'x-fa fa-users',
  45.             bind: {
  46.                 html: '{loremIpsum}'
  47.             }
  48.         },{
  49.             title: 'Settings',
  50.             iconCls: 'x-fa fa-cog',
  51.             bind: {
  52.                 html: '{loremIpsum}'
  53.             }
  54.         }
  55.     ]
  56. });

Step 5: Try it out

Run sencha app watch to test out the application after the calendar has been added.

What’s Next

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