ExtJS Desktop Fundamentals

In this course you will learn the basics of building an ExtJS web application.
Course info
Rating
(269)
Level
Intermediate
Updated
May 13, 2014
Duration
5h 0m
Table of contents
ExtJS Fundamentals Introduction and Overview
JavaScript Fundamentals and the ExtJS Class System
ExtJS Components and Documentation
Containers and Layout Managers
Data Models and Stores in ExtJS
Visual Layout and the Conference Editor App
The Sessions Grid Panel, Xtype, and Editing With Form Panel
MVC, JavaScript File Separation, and Scalability
Controllers, HTML Templates, and Some Style
What is Not Covered in This Course and an Outtake
Description
Course info
Rating
(269)
Level
Intermediate
Updated
May 13, 2014
Duration
5h 0m
Description

From these course modules, you will learn the basics of building an ExtJS web application. You will learn the principles behind building that app, how to build an app from scratch, as well as how to navigate through the process of what controls and modules to use. You will learn a couple basic ExtJS controls, including the grid and form panels. You will learn how to use the ExtJS layout managers, as well as all the different types of layouts. Finally, a complete example application using the ExtJS build system (CMD) and MVC is put together.

About the author
About the author

Peter is the founder of Silicon Valley Code Camp and long-time software professional specializing in mobile and web technologies. He has also been a Microsoft MVP in ASP.NET since 2006.

More from the author
Using React Hooks
Beginner
1h 53m
May 3, 2019
Building a Website with React and ASP.NET Core
Intermediate
3h 19m
May 22, 2018
More courses by Peter Kellner
Section Introduction Transcripts
Section Introduction Transcripts

ExtJS Fundamentals Introduction and Overview
ExtJS is likely the most popular JavaScript library when it comes to enterprise web application programming. It's been said that ExtJS is to the enterprise sites as jQuery is to the consumer sites. You can do amazing things with ExtJS, and this video will show you how. I'm Peter Kellner with Pluralsight, and it's my pleasure to teach ExtJS fundamentals.

ExtJS Components and Documentation
Now that we've moved past the JavaScript fundamentals associated with building an ExtJS app we will now get more specific about the actual library which is ExtJS. Often people refer to ExtJS as a widget library. Instead of starting with markup, HTML, and CSS, you start with widgets and build applications by cobbling together widgets in widgets all tied together by events.

Containers and Layout Managers
Now that we've moved past the JavaScript fundamentals associated with building an Ext app, We will now get more specific about the actually library which is Ext. Often people refer to Ext as a widget library, because instead of starting with markup, HTML and CSS, you start with widgets and build applications by coupling together widgets in widgets. And all tied together by events. To start we're going to define a container and what that really means and how a container adds capability above and beyond components. Then we'll talk about some layout manager basics, while also defining what a layout manager is. Then we'll demonstrate a bunch of different ExtJS layout managers and finally we'll summarize what we've done.

Data Models and Stores in ExtJS
Ext represents data differently than some of the other JavaScript frameworks out there you may have seen such as Knockout, which binds server data to the DOM elements. Sencha uses the idea that you somehow get your data into a local object we call that a store in Sencha it's Ext, then all the changes in that local representation can be monitored by both the visual components they are associated with as well as being able to push changes to the store from the visual components for example, back to the server where the data originally came from. That is to say the stores become the center of the data world for us. We load a store with data from someplace, visual components monitor the store for changes and automatically update themselves and conversely when changes in this stores data take place those changes can be pushed by the store back to the original source. In this section we're going to talk in detail about these stores. First we will define what models are and how these models are related to stores and then we'll give several examples of using models and stores in a standalone fashion. We'll then move later to more complex store interaction and you'll have a good foundation of how this all works. So now let's head over to the ExtJS documentation and briefly look at how ExtJS's models are defined.

Visual Layout and the Conference Editor App
Let's face it, building web applications is hard. Most websites we see on the Internet, even ones with interaction, are typically just a series of pages linked together. We still consider those dynamic websites, because the data downloaded changes depending on those links. For example, a page that shows conference sessions is dynamic, because the most up to date sessions are displayed typically from a database. Many websites add simple JavaScript, which allows for things like searching and sorting, however those are still mostly static pages with a couple enhancements. ExtJS raises the bar significantly, but would take many, many thousands of lines of JavaScript can be done in just a couple hundred to achieve phenomenal results. Let's take a look at the conference editor web application built with ExtJS now and I'll explain some of the features and why I make the claim ExtJS is raising the bar.

The Sessions Grid Panel, Xtype, and Editing With Form Panel
A key differentiator between ExtJS and other JavaScript libraries is that Ext has thought through working with tabular data from the start. Their grid panel is probably the most widely used visual control and for good reason, it's awesome. Ext makes it really easy to marry the grid panel with forms that can be used for both details viewing as well as typical CRUD or create, read, update, and delete operations. In this module we integrate the conference sessions tabular grid panel first with simple static data then finally bring in real data and show how to dynamically sort and group that data. Then we introduce events which are features of all Ext observable objects, grids, forms, stores, panels, etc. and show how to implement a double click event so that when a row or session is double clicked a form pops up. We will then completely implement this form with a save button, so not only can the data details be displayed on the form, but they also can be changed and those changes pushed back to the server. Along the way we'll talk about data validation to ensure that bad data does not get posted back to the server.

MVC, JavaScript File Separation, and Scalability
Building JavaScript apps that are not Hello World type apps takes engineering, discipline, and framework support. ExtJS provides an awesome framework so that engineers can build applications that are robust, scalable, and maintainable. Up until now we've built quite a bit of functionality into one single HTML page that includes the JavaScript between script tags. Obviously that does not scale. This module pulls that single HTML page apart and using the ExtJS framework separates those logical components into their own separate JavaScript files. That is there's separate scripts for models, there's separate scripts for stores, views, and controllers.

Controllers, HTML Templates, and Some Style
The C in MVC stands for controllers. Controllers are important because they contain all the knowledge and logic of your web application. As we discussed in the last module it's fundamentally bad to try and pile all your code in one place. Like we did in earlier modules showing the session viewer in one single HTML file. Without the logic separated out bad things can happen, including engineers spending a lot of time wondering where things happened. Fixing hard to track bugs, since they all update a single file, as well as high maintenance costs associated with buggy code. So in this module we're going to separate a bunch of code that we've added previously in that main big HTML file and we're going to put it into separate controller files so it won't clutter up our views. We're going to learn about templates in more detail and we're going to add some pretty to our session detail viewer.