Try Upgrade Adviser – Scan Your Ext JS Codebase for V8 App Upgrade

Video Series: Build an Ext JS Application from Scratch Using Modern Toolkit

August 24, 2018 1746 Views

Get a summary of this article:

Show

To help new Ext JS developers, I’ve created a series of short videos that walk through the process of building an application from scratch with the Modern Toolkit. In this series, we will build an application that will allow you to view and manage data from all FIFA World Cup matches, perform some analysis based on this data, display some visualizations, and theme our application. Each video covers specific Ext JS Frameworks or UI components, as well as basic concepts and adding new functionality to our application.

Here are the first six episodes:

Introduction to the series

In this video I will describe the content of the tutorial and the application that we will be building. This application will allow you to view and manage data about all matches played at FIFA World Cups.

Episode 1: Generating Application

In this episode we will generate a new Ext JS application using the latest version of Sencha Ext JS 6.6 with open tooling. As you will see in the video, you will need to download a free trial as part of this step. You can download Ext JS 6.6 with open tooling here.

Episode 2: Application Structure

In this episode we will discuss the basic structure of an Ext JS application, application build profiles, class system and MVVM pattern.

Episode 3: Basic Layout

In this episode we will discuss an Ext JS layouting system and define a basic layout for our application.

Episode 4: Data Package

In this episode we will discuss an Ext JS data package, Store, Model and Proxy classis and load data to our application.

Episode 5: Grid Component

In this episode we will discuss an Ext JS grid component, add a grid to our application and connect it to data.

Here is the source code for the application that we are building:
https://github.com/olga-petrova/FifaApp

Stay tuned, more episodes are coming soon!

New to Ext JS?

We encourage you to view our interactive examples, check out our full resource library including additional videos, whitepapers and more, and download a free 30-day trial of Ext JS.

Recommended Articles

Creating a Mobile Application with Ext JS and Capacitor

Introduction Modern mobile applications demand rich user experiences, cross-platform compatibility, and rapid development cycles. In this document, you will learn how Ext JS and Capacitor…

Building Real-Time Dashboards with WebSockets and Frontend Frameworks

Real-time dashboards have become essential in industries where users need instant visibility into changing data. Whether monitoring financial transactions, logistics operations, industrial systems, application health,…

Front-End Frameworks Compared in 2026: Performance, Use Cases, and Trade-offs

Front-end framework selection in 2026 centers on three critical decisions: complete platform versus ecosystem assembly, performance at enterprise scale, and long-term maintenance costs. Ext JS…

Enhancing Component Logic: A Developer’s Guide to Ext JS Plugins

In the world of Ext JS, reusability is king. While subclassing a component is a common approach to extend functionality, it often leads to rigid…

Upgrading Ext JS 7.x to 8.0: A Practical Enterprise Guide

For teams already running Ext JS 7.x, upgrading to Ext JS 8.0 is usually a manageable modernization step rather than a full-scale rebuild. Because the…

Upgrading Ext JS 6.x to 8.0: A Practical Guide

For organizations maintaining Ext JS 6.x applications, upgrading to Ext JS 8.0 is typically a modernization exercise focused on stability, maintainability, tooling alignment, and validation…

View More