Building Applications with Ext JS

Produce high quality business applications using the Ext JS framework
3.2 (19 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.
127 students enrolled
Take This Course
  • Lectures 34
  • Length 2 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 5/2015 English

Course Description

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.

What are the requirements?

  • It assumes you have a good grasp of JavaScript and software development processes in general.

What am I going to get from this course?

  • 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

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.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Introduction

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


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.


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.

Section 2: Security and Identification

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


Users need a way to identify themselves to your system.


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.


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.


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.

Section 3: Presenting Data from the Backend

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.


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.


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.


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

Section 4: Controls and Presentation

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.


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.


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


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

Section 5: Charting with Ext JS

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


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


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.


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

Section 6: Polishing Your Applications

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.


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.


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.

Section 7: Shipping Your Application

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.


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.


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.


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


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.

Section 8: Methods for Debugging and Testing

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.


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.


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.


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


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.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Packt Publishing, Tech Knowledge in Motion

Over the past ten years Packt Publishing has developed an extensive catalogue of over 2000 books, e-books and video courses aimed at keeping IT professionals ahead of the technology curve. From new takes on established technologies through to the latest guides on emerging platforms, topics and trends – Packt's focus has always been on giving our customers the working knowledge they need to get the job done. Our Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.

Ready to start learning?
Take This Course