JS Days 2025 is now live – Join 5,000+ devs for the premier virtual JavaScript event. Register Now

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

August 24, 2018 1135 Views
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

Guide to Estimating ROI When Switching From DIY Libraries to Full Software Development Platforms Like Ext JS

Teams started with Do It Yourself, or DIY, JavaScript tools like jQuery and Bootstrap. But those fall apart as projects scale. Scattered code, user interface…

Top Frameworks Developers Are Using for Custom Software Development in 2025

We’re seeing it more every year; teams aren’t settling for plug-and-play tools anymore. In healthcare, finance, logistics, and other data-heavy industries, there’s a clear shift.…

Meet Sencha AI Coding Companion: Your AI-Powered Assistant for Faster Ext JS Development

Building modern web applications should be exciting. But too often, developers find themselves buried in documentation, endlessly Googling framework quirks, or stuck solving the same…

Ext JS 7.9 & Rapid Ext JS V1.1 Have Arrived

The Sencha team is excited to announce the latest Ext JS version 7.9 and Rapid Ext JS 1.1 release – designed to accelerate development, enhance…

Top 10 JS Grid Customization Tips for a Better UI Experience

Grids are pretty much everywhere in web apps. Working with financial sheets, product details, or users? Then you’ve probably used a JavaScript grid. It makes…

Why Ext JS Framework is the Go-To Framework for Building Scalable and Data-Intensive Web Apps

Web apps are much more advanced now. They deal with large amounts of data and need to stay fast, even with many users. If you’re…

View More

Trusted by Top Developers: Learn how to enhance your development journey — for free

Get the latest newsletter keeping thousands of developers in the loop.

Loved by developers at