Guide applies to: modern

Getting Started using Ext JS Enterprise Components using the Zip

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

Add-on ComponentsConfig Namenpm 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.
Exporterexplorer@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

Notes

The zip resources don’t take advantage of the Sencha Cmd compiler, meaning the resources will have a larger foot print in your web application. We recommend using the npm or Cmd systems.

Download the Ext JS Addons Zips

There are two zips you can 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 addons include Calendar, Exporter, D3, Pivot, and Froala editor components

Start a Trial

If you have 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: Import an Add-on package source into your Web Application

This step will cover importing an add-on package into your web application. In this example we will use the Ext JS Calendar add-on. The same process could be used for any add-on package.

  • Copy [zip]/packages/calendar/build/modern/calendar-debug.js to your web app directory.
  • Declare the resource import in your web page using <script src="./calendar-debug.js"></script>.

https://docs.sencha.com/extjs/7.4.0/modern/Ext.Viewport.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
  6.   <title>Title</title>
  8.   <!-- Ext JS -->
  9.   <script src="./ext-modern-all-debug.js"></script>
  11.   <!-- Ext JS Theme -->
  12.   <link href="/resources/theme-material-all-debug.css" rel="stylesheet" />
  14.   <!-- Ext JS Add-on Calendar -->
  15.   <script src="./calendar-debug.js"></script>
  16. </head>
  17. <body>
  18.   <script>
  19.   </script>
  20. </body>
  21. </html>

Step 3: Import Add-on Package theme into your Web Application

This step will cover importing an add-on package theme into your web application. In this example we will use the Ext JS Calendar modern theme. The same process could be used for any package theme.

  • Copy the resources directory contents [zip]/build/modern/material/resources/* to your web app directory resources.
  • Declare the theme in the html file using <link href="/resources/calendar-all-debug.css" rel="stylesheet" />.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
  6.   <title>Title</title>
  8.   <!-- Ext JS -->
  9.   <script src="./ext-modern-all-debug.js"></script>
  11.   <!-- Ext JS Theme -->
  12.   <link href="/resources/theme-material-all-debug.css" rel="stylesheet" />
  14.   <!-- Ext JS Add-on Calendar -->
  15.   <script src="./calendar-debug.js"></script>
  16.   <link href="/resources/calendar-all-debug.css" rel="stylesheet" />
  17. </head>
  18. <body>
  19.   <script>
  20.   </script>
  21. </body>
  22. </html>

Step 4: Add the Add-on Component

This step covers adding the Add-on component to verify you have everything configured correctly.

  • Add the <script> tag with the Ext JS component configuration to your html file. This is used to simpifly the example in this guide.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
  6.   <title>Title</title>
  8.   <!-- Ext JS -->
  9.   <script src="./ext-modern-all-debug.js"></script>
  11.   <!-- Ext JS Theme -->
  12.   <link href="/resources/theme-material-all-debug.css" rel="stylesheet" />
  14.   <!-- Ext JS Add-on Calendar -->
  15.   <script src="./calendar-debug.js"></script>
  16.   <link href="/resources/calendar-all-debug.css" rel="stylesheet" />
  17. </head>
  18. <body>
  19.   <script>
  20.     Ext.application({
  21.       name: 'MyApp',
  22.       launch: function () {
  23.         Ext.Viewport.add({
  24.             xtype: 'calendar',
  25.             title: 'Calendar',
  26.             flex: 1
  27.         });
  28.       }
  29.     });
  30.   </script>
  31. </body>
  32. </html>

Step 5: Try it out

Save the changes and reload the web browser.

What’s Next

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