Ext JS

Ext JS is a JavaScript framework for building rich, interactive web applications. It provides a set of UI components and tools that allow developers to create modern web applications that look and feel like desktop applications.

Components

Components are the heart of Ext JS. In reality, they are just JS components with specific attributes.

Components definitions

To define/declare a component, you use the Ext.define method, as follow:

This component was made by Stratis Dermanoutsos. The code can be found here.

A component MUST extend another component, whether that’s an Ext core component or a custom one.

For example, to define a custom button:

This component was made by Stratis Dermanoutsos. The code can be found here.

This button was a component for the classic toolkit. In modern, it can be found as Ext.Button.

All Ext JS’s core components and their attributes/methods/events can all be found in the documentation with examples.

Use components

To use a component, you need to use either its class name (the string value, first argument of the define method) or its alias attribute.

Notice how the above button we created has an alias equal to widget.customButton.

To use it, simply put it in the items of another class or a container using the xtype attribute. For example:

This component was made by Stratis Dermanoutsos. The code can be found here.

When you use a component, you can add or either overwrite its existing properties as shown above.

Requires

To use any component, more often than not, the compiler find it on its own. However, sometimes, you’ll have to add the component’s classname in the requires array of another component you want to include it in.

For example:

This component was made by Stratis Dermanoutsos. The code can be found here.

Toolkits

Sencha Ext JS offers three different toolkits, each of which is designed to support a specific type of application development:

  • Classic: The Classic toolkit is Ext JS’s original toolkit, and is designed for building traditional, “desktop-style” web applications.

    This component was made by Stratis Dermanoutsos. The code can be found here.

  • Modern: The Modern toolkit is a newer addition to Ext JS, and is designed for building modern, “mobile-first” web applications.

    This component was made by Stratis Dermanoutsos. The code can be found here.

  • Universal: The Universal toolkit is a combination of the Classic and Modern toolkits, and is designed to support applications that need to run on both desktop and mobile devices.

    This component was made by Stratis Dermanoutsos. The code can be found here.

Layouts

There are several layouts that a container in Ext JS can use.

To declare which one will be chosen, we use the layout property.

This component was made by Stratis Dermanoutsos. The code can be found here.

Available layouts

  • border

    This is a multi-pane, application-oriented UI layout style that supports multiple nested panels, automatic bars between regions and built-in expanding and collapsing of regions.

    This component was made by Stratis Dermanoutsos. The code can be found here.

    This layout’s children must declare a specific region to reside in.

    Such regions are:

    • center
    • east
    • north
    • south
    • west

  • card

    This layout manages multiple child Components, each fitted to the Container, where only a single child Component can be visible at any given time.

    This component was made by Stratis Dermanoutsos. The code can be found here.

  • fit

    This is a base class for layouts that contain a single item that automatically expands to fill the layout’s container.

    This component was made by Stratis Dermanoutsos. The code can be found here.

  • hbox

    A layout that arranges items horizontally across a Ext.container.Container.

    This component was made by Stratis Dermanoutsos. The code can be found here.

    It is basically the same as using the following CSS in an HTML’s div:

    This component was made by Stratis Dermanoutsos. The code can be found here.

  • vbox

    A layout that arranges items vertically across a Ext.container.Container.

    This component was made by Stratis Dermanoutsos. The code can be found here.

    It is basically the same as using the following CSS in an HTML’s div:

    This component was made by Stratis Dermanoutsos. The code can be found here.

Stores

A store is a client-side collection of records (instances of a Model class). It basically holds instances of a Model class.

Let’s say we define a store of Users.

This component was made by Stratis Dermanoutsos. The code can be found here.

What we did, is create a store that holds 4 instances/objects of the User model.

The model can be defined as such:

This component was made by Stratis Dermanoutsos. The code can be found here.

To display the data in a dataview or a grid, simply add a property store: users in the component’s attributes.

Store inheritance

We can have a store inherit another store. This can be done with the type and source properties.

This component was made by Stratis Dermanoutsos. The code can be found here.
  • type is used when the new store inherits the parent store’s properties but the data icluded, although identical, are different instances and, as such, will create duplicates.
  • source is used when the new store inherits the parent store’s data. Source is typically used when we want to filter or sort data without editing the parent store.

Sorting

To sort a store’s data, you can either declare it with the sorters property or call the sort method.

Let’s say we have the following store:

This component was made by Stratis Dermanoutsos. The code can be found here.

  • Property

    This component was made by Stratis Dermanoutsos. The code can be found here.

  • Method

    This component was made by Stratis Dermanoutsos. The code can be found here.

Filtering

Same with sorting, to filter a store’s data, you can either declare it with the filters property or call the filter method.

  • Property

    This component was made by Stratis Dermanoutsos. The code can be found here.

  • Method

    This component was made by Stratis Dermanoutsos. The code can be found here.

Global stores

To make a store global is a very quick process:

  1. Go to your Application.js file and, inside the class definition, add the following:

    This component was made by Stratis Dermanoutsos. The code can be found here.

  2. In your store, provide a storeId attribute, usually the same as the alias.

    This component was made by Stratis Dermanoutsos. The code can be found here.

Install and create your first app

With NPM

  1. Gerenate your first project

    This component was made by Stratis Dermanoutsos. The code can be found here.

  2. Run the app

    This component was made by Stratis Dermanoutsos. The code can be found here.

With CMD

  1. Gerenate your first project

    This component was made by Stratis Dermanoutsos. The code can be found here.

  2. Run the app

    This component was made by Stratis Dermanoutsos. The code can be found here.

Build your App

  1. Clean the current build

    This component was made by Stratis Dermanoutsos. The code can be found here.

  2. Build

    This component was made by Stratis Dermanoutsos. The code can be found here.

Build types

There are 2 main types of builds.

  • development which builds the app for the developer to run.

    This build includes non-minified code and detailed error messages.

  • production which is the obvious choice for a complete app, ready to be deployed.

    This build does not have any debugging potential as it includes minified code for optimized performance.

  • testing which is a more dev friendly option.

    This is mostly used when the development is in the very late stages and the app can only be tested after being built and deployed.

    This build includes non-minified code and detailed error messages.

  • universal. This is a bit complicated.

    In universal mode, an Ext JS application includes both minified and non-minified code, as well as detailed error messages.

Templates

Templates are used to create a project will default code, functions, methods, imports etc already setup for you on project creation.

You can also create your own templates to use.

Turning app into template

  1. Supposedly your project is called ProjectTemplate.

    Find and replace all references of ProjectTemplate to {appName}.

  2. Delete all (classic|modern)(-(el_GR|en|...)).json(p) files.

    These are the build files that are created on running the app.

  3. Add the .tpl extension to:

    • app.json
    • build.xml
    • index.html

  4. Add the .tpl.default extention to all other files except for *.json and *.scss ones.

  5. “Escape” all dot characters (.) that are inside curly brackets ({}) in app.json.tpl.

    For example, change

    "{toolkit.name}"

    to

    "{toolkit\.name}"

    To make your life easier, search for regex \{(\w+\.\w+)+\}.

  6. Change values inside curly brackets ({}) so that they get compiled correctly.

    Basically, when building an app using a template, the program assumes that whatever is in curly brackets ({}) is a variable to be changed. So, if you want to keep the curly brackets ({}) and the value inside, you must change the format so it understand it’s here to stay.

    Instead of

    bind: '{binding}'

    we want

    bind: '{["\{binding\}"]}'

    DO NOT attempt this for {appName} that was mentioned earlier!

Create app using template

sencha generate app -ext -s <PATH_TO_TEMPLATE> <APP_NAME> <PATH_TO_CREATE_APP>

Eg.

sencha generate app -ext -s ./templates/some-template myApp ./myApp

Packages

Create a package

sencha generate package <PACKAGE_NAME>

Eg.

sencha generate package CustomComponents

Inside {workspace}/packages/local/ you will find a folder with the package name you set earlier.

package.json

This is an example of a package.json file’s content. It may vary from app to app but this is how I fill them:

This component was made by Stratis Dermanoutsos. The code can be found here.

Initialize a repository

sencha package repo init -name <YOUR_NAME> -email <YOUR_EMAIL>

Eg.

sencha package repo init -name "Stratis" -email "stratis.dermanoutsos@gmail.com"

This must be run inside the package’s directory.

This is used to sign the package as yours, in case you want to publish it.

Build a package

  1. Generate the *.pkg file.

    sencha package build

    This must be run inside the package’s directory.

  2. Add the built package to the local repository.

    sencha package add <PATH_TO_THE_pkg_FILE>

    Usually, it’s located in {workspace}/build/{packageName}/.

Make a package remote

  1. Find the pkgs directory in your local machine.

    Usual path for Windows: C:\Users\USER\bin\Sencha\Cmd\repo\pkgs\.

  2. Copy the version of the package you built. Inside the pkgs directory, the paths work this way: pkgs/{packageName}/{version}/.

    Copy the version directory. (eg. 1.0.0/)

    We only copy the version directory to not lose any other version of any other package.

    If the package does not exist in the remote machine, copy all of the {packageName}/.

  3. Paste it inside the {packageName}/ directory in the remote machine.

    Eg. http://{path}/cmd/packages/{packageName}/.

  4. Be sure to update catalog.json so that it references the latest version.

    There is 1 catalog.json for the packages/ folder and 1 for each {packageName}/ folder.

    Both must be updated.

Use remote package

  1. Add your remote repository your sencha’s list.

    sencha package repo add <REPOSITORY_NAME> <REPOSITORY_PATH>

    Eg.

    sencha package repo add StratisPackages http://{path}/cmd/packages/

    This can be run anywhere. The list is global

  2. Add the package’s name in the requires of app.json. Eg.

    "requires": [
    "CustomComponents"
],

    To use a specific version, add a @ followed by the version. (More here)

    "requires": [
    "CustomComponents@1.0.1"
],

  3. Sync the repository.

    sencha repo sync

  4. Refresh package list.

    sencha app refresh -packages

    IMPORTANT: Make sure you do not have a local copy of the package.

    If there isn’t one already, in the app’s workspace directory, inside packages/ folder, a new folder called remote/ has been created with the packages you use.

Resources