5 Examples Of Successful ExtJS Tutorials For Beginners

User interface (UI) is a critical component of a web application and having an attractive UI promotes a positive user experience. Several Javascript frameworks allow web developers to build stunning UI with advanced functionalities. ExtJS or Extended JavaScript is a comprehensive JavaScript framework developed by Sencha to develop data-intensive and cross-platform web and mobile applications using JavaScript.

Currently, Ext Js provides more than 140+ UI components such as calendars, grids, trees, lists, forms, menus, toolbars, panels, windows, and hundreds of different extensions.

So are you aiming to build high-performing web and mobile UIs using ExtJS? Then go through the following five examples of a successful Ext js tutorial for beginners.

How to build an Ext Js application using a modern toolkit?

The first step in creating an Ext JS application is generating an application using Sencha’s open tooling. You will use Sencha ext-gen as the application generator and ext-build as the build tool based on Sencha cmd. To use those sencha tools, you need to request them from the Sencha website. Go to ExtJS and click on start free trial.

You can fill out the form and get the npm package as a zip download to your email account or directly install it using public npm. Using the free trial version, you can install the Ext Js using the following command from your command-line tool.

 npm install -g @sencha/ext-gen

If you are a registered customer, you can find all the related packages in Sencha’s private npm registry. You need to log in to access the registry using the below command. It will download the npm packages from the private npm registry.

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

npm install -g @sencha/ext-gen

After login, you can type in the following command to generate the new application.

ext-gen app -a 

Then Your project is generated successfully. Now you can go to the project folder by typing the following command.

cd ./modern-app

Finally, you can execute your project using the following command, which will open your application in a web browser.

npm start

After executing these steps, you have been successfully generated your first Ext Js application.

How to build a basic layout for your application?

Ext Js uses Model View Controller (MVC)  and Model–View–ViewModel (MVVM) design pattern for its generated project structure. The video tutorial discusses the basic structure of an Ext JS application, application build profiles, class system, and MVVM pattern. The main sources code of your application resides in the ‘app’ folder, and the build folder contains build-related code such as testing and production build. The app folder consists of the profiles related to phone, desktop, and shared. The shared folder contains the code shared between the desktop and the phone.

Each app folder source code is organized into model and view folders. View folder contains the application’s main view, and there can be different view containers based on your application. Next,  you can find the View model of each main view.js file definition. The view models of each child view file are also located in the main view file.  Your ext Js application also contains an Application.js file, and its instance will be included in the app.js file.  Sencha will automatically create the contents of the Application.js file. 

How can you use Ext Js Data Package?

Ext Js data package consists of three classes: Model, Store, and Proxy.  The model consists of data fields and some business logic of the application whereas, the Sore defines the instances of the model class. Finally, both the store and the model can use the proxy class to store and handle the data.

You can store the data in the JSON files and store it in the data folder of the app folder so that both desktop and phone profiles can access those data. Then you can use the following store structure to access the data from that JSON file.

Proxy :{
	Type : ajax
               Url : 
               Reader {
                   Type : json
               }

How to add a grid component and connect with data?

Ext Js Grids help web developers efficiently load the data set in rows and columns without significantly affecting the page load speed.  To add a grid component for your application, first, you need to have a model that defines your data structure. You can add model instances using Ext.data.Store, a collection of data items. It also means adding  Ext.data.Model instances to your application. 

Then to add a grid component, you can use Ext.grid.Panel component that renders the data contained in an Ext.data.Store. The Ext.grid.Panel is displaying the data and task of  Ext.data.Store is fetching and saving the data. For example, the following shows an example of a grid panel component.

var itemStore = Ext.create('Ext.data.Store', {
    model: Item,
    data: [
        { item: Milk, Price: '$1.2'},
        { name: 'Cheese',Price: '$5.2'}
    ]
});

Ext.create('Ext.grid.Panel', {
    renderTo: document.body,
    store: itemStore,
    width: 700,
    height: 500,
    title: 'Item Prices',
    columns: [
        {
            text: item,
            width: 100,
            sortable: false,
            hideable: false,
            dataIndex: item
        },
        {
            text: 'price',
            width: 100,
            dataIndex: price,
            hidden: true
        }
     ]
});

How to add Chart Component to your application?

To add a chart component to your application, you need to define store, type, axes, and series. Series is the graphical item(s) in a chart such as a line, bars, columns, or the pie. First, you need to define a model and create a store to display in the chart.  For example, the following defines the data for the chart.

Ext.define('PricesDetails', {
    extend: 'Ext.data.Model',
    fields: [
         { name: Price, type: float}
         { name: Year}
    ]
});

Next, you need to define the store in the 4th example and configure the axes and series in the video tutorial. Finally, after creating the Chart component, you will display the data using your preferred chart component.

Are you excited to get started with Ext Js Grid Library?

Ext Js is a robust Javascript framework that enables developers to build applications with modern UI designs. This article describes five examples of successful ext js tutorials for beginners, from generating an Ext Js application to adding a Chart component to the application.

Develop high-performing grids using Ext Js Grid Library!