Introducing React ReExt – Sencha Ext JS Components in React! LEARN MORE

Video Series: Build an Ext JS Application Using Modern Modern Toolkit – Part 2

October 23, 2018 122 Views
Show

I am pleased to present the second installment of my video series describing the process of developing an application from scratch using the Modern Toolkit. In these episodes, we will continue to build an application that will handle data from all FIFA World Cup matches. We will improve the look and feel of the Javascript Grid components in the application while also adding new ones such as List, Pivot Grid, and Charts for a sleek user interface design. You will also learn how to aggregate and load data in a store based on data from another store, as well as how to define the architecture of an application targeting various devices.

Here are five more episodes – as a reminder, you can view episodes 1-5 here or on our YouTube channel:

Episode 6: List Component

In this episode we add a List component to display data about FIFA matches in a phone version of our application.

Episode 7: Advanced Grid Features

In this episode we enhance our Grid component: insert HTML code into Grid cells, aggregate values from different fields in one cell, bind CSS class to a row based on the field values, add RowNumberer column.

Episode 8: Improving List Component

In this episode we enhance our List Component: extend the template corresponding to a listed item, and add CSS styles to DOM elements used in the template.

Episode 9: Pivot Grid Component

In this episode we add a Pivot Grid component to our application to aggregate and analyze data about FIFA matches: find countries that won and lost the biggest number of games at FIFA World Cups. We calculate flat data about matches based on the data from the original dataset, load this data into the Pivot Grid component and discuss its configuration properties: matrix, left axes, top axes and aggregate.

Episode 10: Chart Component

In this episode we add a Chart Component to our application to visualize count of wins and losses at FIFA World Cups for every country. We calculate aggregated data, load it to the Chart Component and discuss its configuration properties: type, axes and series.

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

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 with open tooling.

Show
Start building with Ext JS today

Build 10x web apps faster with 140+ pre-build components and tools.

Latest Content
Discover the Top 07 Architecture Patterns used in Modern Enterprise Software Development
Discover the Top 07 Architecture Patterns used in Modern Enterprise Software Development

Developing software without an architecture pattern may have been an option back then. However, that’s…

JavaScript Design Patterns: A Hands-On Guide with Real-world Examples
JavaScript Design Patterns: A Hands-On Guide with Real-world Examples

As a web developer, you know how popular JavaScript is in the web app development…

Virtual JS Days 2024のハイライト
Virtual JS Days 2024のハイライト

2024年2月20日~22日、第3回目となる「Virtual JavaScript Days」が開催されました。JavaScript の幅広いトピックを採り上げた数多くのセッションを実施。その内容は、Senchaの最新製品、ReExt、Rapid Ext JSまで多岐にわたり、JavaScriptの最新のサンプルも含まれます。 このカンファレンスでは多くのトピックをカバーしています。Senchaでセールスエンジニアを務めるMarc Gusmano氏は、注目すべきセッションを主催しました。Marc は Sencha の最新製品「ReExt」について、詳細なプレゼンテーションを実施。その機能とメリットを、参加者に理解してもらうべく詳細に説明しました。 カンファレンスは、Senchaのジェネラルマネージャを務めるStephen Strake氏によるキーノートでスタートしました。キーノートでは、会社の将来のビジョンについての洞察を共有しています。世界中から JavaScript 開発者、エンジニア、愛好家が集まるとてもエキサイティングなイベントとなりました。これは、JavaScript…

See More