Missed JavaScript Days 2026? The Replays Are Now Available – Watch Now!

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

August 24, 2018 2069 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.

Author

Olga Petrova

Olga is a Sales Engineer at Sencha and has been a software developer for more than 11 years. She has experience as a front-end developer and has been working with Ext JS since version 1.1. Prior to joining Sencha, she worked at AutoVision GmbH (a subsidiary of Volkwagen AG), Clueda AG, dotplot GmbH, and other software and services companies. Olga graduated from Tyumen State University.

Recommended Articles

How to Use the Ext JS Grid in React: Setup, Columns, Editing and Grouping

Set up the Ext JS grid in React with ReExt, then add typed columns, store-backed data, inline editing, grouping and summaries. Full code included. The…

Understanding Ext JS Layouts and Containers: An Introduction (Classic vs. Modern)

Building complex, responsive, and data-intensive Web applications requires a solid layout engine. In Ext JS, the layout system is the backbone of your Application UI.…

AI-Driven Test Grading with Ext JS, Node.js, and OpenAI: A Secure Enterprise Architecture

Learn how to build an AI-driven test grading system with Ext JS, Node.js, MySQL, and OpenAI using secure API architecture, deterministic scoring, and human oversight.…

Sencha AI Just Got a Lot Bigger: One Chatbot, Every Sencha Product

Sencha’s AI assistant has grown from a focused Ext JS helper into a product-aware chatbot covering the whole Sencha suite. Here’s what’s new and why…

Building High-Performance Real-Time Operational Dashboards with Ext JS and React

Real-time operational dashboards are no longer simply reporting interfaces. In logistics, fleet management, supply chain operations, financial services, and other data-intensive environments, they are part…

Async/await with Ext JS

Probably one of the most appreciated features of the latest versions of JavaScript is Promises, and in particular their use through the new language keywords…

View More