Building Applications with Ext JS
1.9 (37 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
205 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Building Applications with Ext JS to your Wishlist.

Add to Wishlist

Building Applications with Ext JS

Produce high quality business applications using the Ext JS framework
1.9 (37 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
205 students enrolled
Created by Packt Publishing
Last updated 5/2015
Current price: $10 Original price: $85 Discount: 88% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 2 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Create grids to present hierarchical and report data for users
  • Deploy visualization techniques in Ext.chart to produce neat business dashboards
  • Test your code for both frontend widgets and models to get an error-free app
  • Get to know security best practices to protect your app from unwanted attacks
  • Optimize your app with easy-to-understand layouts and clean controller logic
  • Use custom templates to add your own brand to the app
View Curriculum
  • It assumes you have a good grasp of JavaScript and software development processes in general.

Ext JS is a powerful framework for developing complex web applications for your business. With more such business applications moving to the web everyday, a framework such as Ext JS can speed up your development and help you sharpen the quality of your applications.

This video course will take you through the components of the framework that you need for a typical business application.

You will get a thorough overview of how the Ext JS data package works, how it interacts with the many frontend widgets, and general concerns such as security, production optimized code, and continuous integration. We'll then show you data using the wide variety of components available, before moving on to charting and graphics, and bringing our app to life. Finally, you will deploy and test your code to make your application production-ready.

By the end of this course, you will cover all the key aspects of the Ext JS framework and successfully build and deploy your application.

About the Author

Simon is the head of the Big Data team at Red Gate, focusing on researching and building tools to interact with Big Data platforms. Previously, he has worked in the data intensive worlds of hedge funds and financial trading, ERP, and e-commerce, as well as designing and running nationwide networks and websites. These days, his head is in Big Data and visualisation.

In the course of those roles, he's designed and built several organisation-wide data and networking infrastructures, headed up research and development teams, and designed (and implemented) numerous digital products and high-traffic transactional websites.

For a change of technical pace, he writes and produces screencasts on frontend web technologies such as ExtJS, and is an avid NodeJS programmer. In the past, he has also edited novels, written screenplays, developed websites, and built a photography business.

Who is the target audience?
  • If you want to get to know the ExtJS framework and what it can do for you, then this video course is for you.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
34 Lectures
3 Lectures 06:32

An overview of the application we are going to create, the key themes, and what the viewers will get from this course.

Course Overview

Keeping your JavaScript and CSS code organized in a large scale Ext JS application is the key to easy development and maintainability. This section shows a good standard layout to keep your code nice and clean.

Application Layout

Creating a folder structure for a blank application can be tedious and error prone. SenchaCmd provides a handy command line utility to initialize a skeleton for your application and get you started.

Introducing Sencha Cmd
Security and Identification
5 Lectures 15:08

Identifying users is often the first thing your application needs to do.

Preview 03:19

Users need a way to identify themselves to your system.

Login Dialogs

Knowing who the user is is just the first part of security; we also need to know what that user is allowed to do. This requires a permissions model. It is also a good idea to make sure that actions the user is not allowed to perform are properly disabled, or hidden in the user interface.

Securing Client-side Actions

Client-side security can always be by-passed, and you should never have your server trust what it receives from a client. You need to duplicate validation on the server, and ensure that the same security mechanisms are followed.

Securing All Back-end Requests

It is all very well creating a few test users by hand in the database, but when your application reaches production you will need some sort of interface to allow administrators to create users and work with permissions.

User Management Interface
Presenting Data from the Backend
4 Lectures 12:37

Different users have different needs and access rights. We shouldn't be showing them menu options that don't make sense to them, so here we will look at dynamically building the menus in our application.

Preview 04:38

We have already seen some use of stores. This section is a deeper dive, working to refactor our existing code for better reuse and handling some interesting edge cases.

The Stores

Here we will be looking at some of the alternative options for proxies, how to best deal with different types and formats of data, and how we can optimize the way we talk to our server.

Model Proxies

The structure of data on the backend is not always the same as the model in the frontend, but careful thought is still needed.

How to Structure MySQL Tables
Controls and Presentation
4 Lectures 13:13

Grids are a key part of most business applications and a great way to show and interact with tables of data. This section goes into some of the advanced features of grids in Ext JS.

Preview 04:35

A common pattern in business applications is to give a user an overview list of items, and let them drill down to the details of a particular item by selecting one from the list.

Master-detail Views

Present date-based information in an intuitive way that matches calendar applications that users are familiar with.

Calendar Control

Often the basic components in Ext JS don't give you enough flexibility in formatting display. Xtemplates let you display information better.

Custom Templates
Charting with Ext JS
4 Lectures 09:48

Tables may be a good way of showing individual detail, but charts and graphs make it much easier to see broad trends.

Preview 03:10

Sometimes you might want to be able to save your charts and share them with other programs. Exporting them to PNG helps.

Exporting Charts as PNGs

SVG and PNG files are great for use on screen, but if you want to print out your chart results, a PDF might be better.

Exporting Charts as PDFs

Some data is linked to specific locations on a map. We can display this geospatial data as annotations on a map panel.

Places and Maps
Polishing Your Applications
4 Lectures 12:32

Not everyone speaks English, and practically every country has different ways of showing numbers and dates. Translation and locale support are essential for a global application.

Preview 03:49

The default Ext styling is nice and usable, but sometimes you're going to want to put a bit of a personality into your application.

Theming with SASS

Making your application more accessible to people with disabilities can be a legal requirement. There are a range of disabilities to consider from poor sight and color-blindness to difficulties with typing and pointer control.


Users expect their browser back button to work in an intuitive way. This video shows you how to add history support and management to your application.

History Support
Shipping Your Application
5 Lectures 18:44

Ext JS applications can get very big. It is important for network performance to reduce the size as much as possible with a variety of compression techniques.

Preview 03:31

Developing your application is just the first step; you need to be able to deploy the right bits to the right server to get it into the hands of users.

Deploying to a Server

Sometimes, you need access to special device APIs, or need to deploy your application as a desktop native app rather than as a website. You can wrap the application as a desktop executable with these techniques.

Packaging a Desktop Application

Speeding up loading and display of your application for international users.

Using a CDN

Security is important, especially with the sort of data-based applications you tend to write with Ext JS. Protecting against cross-site scripting, cross-site request forgery, and dealing with cross-origin requests are key parts to understanding security in Javascript, and Ext JS.

Cross-site Scripting, CORS, JSONP, and CSRF
Methods for Debugging and Testing
5 Lectures 18:57

Chrome dev tools are extremely powerful for debugging a number of issues with any web browser. Here we look at how you can use them to track down problems in your application.

Preview 03:32

Ext components produce complex HTML which can be too granular for us to debug. Tools like illuminations provide a more Ext-centric view and present information in a way that's closer to the way the framework works.

Digging into the Ext JS Object Model with Illuminations

While you're developing, it can be tedious to have to keep running through a series of actions to test the bit of interface you are working on. You can automate using the application with Selenium to avoid this.

Automated Testing with Selenium

Cross-browser testing is repetitive and time consuming. We can automate a lot of this, just as we did with Selenium.

Cross-browser Testing with TestSwarm and Saucelabs

The automated testing of your interface and units of code is great, but we can take this to the next level by setting up a continuous integration server to keep running these tests for you.

Looking towards Continuous Integration for Ext JS
About the Instructor
Packt Publishing
3.9 Average rating
8,109 Reviews
58,291 Students
686 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.