Sencha Ext JS Tutorial: An Introduction to Ext JS 5

Sencha Ext JS is a JavaScript Framework for building interactive HTML5-based web applications. It has a rich UI application development framework, is good for charting data, and supports a wide array of browsers.

This blog post is based on the Codementor Office Hours with Sencha’s developer relations manager, Arthur Kay. The article is about what’s new in Ext JS 5, and will serve as a simple walkthrough of how to use the framework. At the end, Arthur answers some of the audiences’ questions, such as how Sencha Ext JS 3.x compares to 5 and how compatible Sencha is with mobile phones.

Introduction

Sencha has been around since year 2007, with 2 million developers world-wide uses it and over 10 thousand commercial customers, including 60% of the Fortune 100 companies such as Google, Adobe, and Salesforce. As jQuery and other libraries came out in 2006, Sencha was quite revolutionary at the time of its first release, but it is now year 2014 and Sencha’s flagship Ext JS has now evolved into version 5 (and recently updated to 5.1 as of December).

Some important updates of Ext JS 5 are:

Support of Applications Across Multiple Devices
In particular, the Ext JS 5 works well with tablets with charts that support touch-based gestures and new responsive themes that can adjust to mobile and desktop screen sizes.

Increased Developer Productivity
Ext JS 5 also supports 2-way data binding to save developers time, and the data-binding is not limited to the HTML template as it can be done across the entire framework and all widgets. In addition, Ext JS 5 will also support URL Routing so it is possible to do deep-linking.

Sencha Ext JS vs AngularJS

If you’re wondering how Ext JS compares to Angular JS, here is a quick overview of the differences between the two:

As you can see, Ext JS takes a very different approach to frameworks. Many widgets come out of the box, and users don’t have to rely on third-party libraries either.

More importantly, Ext JS supports a lot of legacy browsers, including Internet Explorer 8 and 9. Many large organizations can’t expect their users to be running the latest browsers on their device, especially since a good portion of internet users are still using Internet Explorer 8.

In terms of development style, AngularJS seems to be HTML-driven and therefore needs quite a bit of hand-crafted HTML. Ext JS is more JavaScript-driven in comparison and doesn’t require much HTML code.

an example of the HTML template of an Angular app

Sample Applications

Hello World App

Let’s take a look at what an Ext JS Hello World app would look like.

The HTML page is pretty simple, where it includes the Ext JS framework along with a theme. You don’t even need to have anything in the body tag. The most important thing in the HTML template is naturally the app.js

Similar to what you’d do in jQuery or other frameworks, the Ext.onReady block will run once the HTML web page has finished loading. Once the page is ready, Ext.create() will begin to create widgets and then render them to the screen.

In this HelloWorld example, we create the widget Ext.Panel, which is the name of the class, and render it to the body of the web page. It has a height, width, and title along with a bit of raw HTML, but the HTML part isn’t something you’d normally do—this is just for demo purposes. When you jump into your browser, you’d see this:

Where you have a panel with a blue background from the theme, and the raw HTML goes into the rest of the panel.

You can follow along and make this example through the Ext JS Hello World Documentation.

You can also do a live preview of the example from the API docs where you can see the configuration options, properties, methods, and so on.

Generating an App through Sencha Cmd

Sencha Cmd is a suite of command line tools to help users optimize the application they build, in which you don’t have to include the entire sencha framework and all the custom-code you’ve written unless your application requires it. Sencha Cmd also integrates with Cordova and PhoneGap so you can natively package and deploy your app to an iPad or Android tablet.

Let’s open up a terminal to create an app through the Sencha Cmd.

We’ll run a Sencha Cmd here and generate a starter application called Codementor, which will output to the location CodeMentorDemo. This will auto-generate a starter application with an MVVM architecture along with all the necessary bindings for a build process.

After the Sencha Cmd finishes generating the app, you can open your IDE and find all your code and files in the CodeMentorDemo folder.

You can also start the local web server via the Sencha Cmd

sencha web start

In which your webpage will be fired up on http://localhost:1841

Sencha Grid

Sencha Grid is a great way to display data, and it is one of the most popular features of the Ext JS. You can sort the grid, turn columns on and off, and rearrange columns on the fly. As of Ext JS 5 there is now a grid widget that can be directly embedded into a grid row, and the data is updated live.

Let’s look at an app that uses Sencha Grid, in which the Ext JS Grid will be popped on top of an existing starter app.

The Ext JS can use many different types of other proxies such as local storage proxies and REST proxies. This example app uses an AJAX proxy that will be used in the HelloWorld.store.Cars class, where it will load code from a JSON file.

The model car class will extend the default Ext model so it would inherit a lot of things such as getters and setters. Here we can define what sorts of fields to expect. We can either be lazy and provide an array of strings for the model class to figure out what type of data that is, or be more explicit about the type of the car model should be a string. These names are important when we get into the main view.

Here the text would be the column’s title, and the dataIndex will tell which column gets mapped to the store. You can also define the column width or make it flex, which would horizontally divide the remaining space.

For more information about Sencha Ext JS, you can visit the following links:

• Ext JS Kitchen Sink demo
• http://www.sencha.com/products/extjs/#resources
• http://docs.sencha.com/extjs/5.0/
• http://www.sencha.com/blog/announcing-sencha-ext-js-5

Q&A

What are some startups or popular apps currently using Ext JS in production?

Williams and pixx.io come to mind. A lot of the big companies use Ext JS for proprietary and internal use, so you won’t find a lot of examples in public spacing. However, you can check out the Sencha Blog for more information, as it features a lot of customers and highlights companies who want to talk about their experience using the Sencha frameworks.

How would you compare Ext JS 3.x vs Ext JS 5 in terms of performance?

Although there was a tradeoff in a decreased performance from rewriting Ext JS 4 to support MVC and MVVM, the Ext JS 5 has improved on its performance. However, at the moment there has not been any explicit comparison between the performance of the two versions.

How difficult is it to upgrade from Ext JS 3.x to 5?

Due to big architectural differences and 5 years worth of API changes and bug fixes, it would likely be fairly difficult to upgrade from version 3.x to 5. However, one of the basic goals of Ext JS 5 was to prevent this migration difficulty from happening again.

What is the best way to use multiple themes for an app?

One way is to tack on a new theme whenever you generate a new app through the Sencha Cmd build process—many customers have rebranded their own apps this way. Another approach is to configure the app.json file to specify which platform will receive which theme, and then swap them out when the application first loads. The API Docs have guides for both methods.

How well does the Ext JS 5 support mobile phones?

The widgets of Ext JS 5 explicitly support tablets, but those will actually run on a phone as well, including the touch support. However, since phones are typically underpowered and have much smaller screensizes than tablets or desktops, customers have not asked for phone support and therefore there is not much documentation on iPhone and Android phone development.

Would Sencha Ext JS be a good choice for beginners looking to build their first iPhone apps or games?

If you’re exclusively focusing on mobile phone development, Ext JS might not be the best choice, as it is a comprehensive widget framework. It is unlikely you will build a large app that makes use of all the components available. Furthermore, Sencha is not a game development company, which means even though the framework is around HTML5 and you may think it is good for building an HTML5 game, it is ultimately not the right tool for the job. Thus, you’d be better off checking out game interface libraries to see what you can do with those.

Several years ago, Facebook heavily invested in HTML5, then essentially pulled back to build mobile apps natively. What’s your take on that decision and how’s the HTML5 cross-platform ecosystem now?

When Mark Zuckerberg came out and said HTML5 wasn’t ready back in 2012, Sencha flatly disagreed with him and created an app called Fastbook, which essentially rewrote the actual Facebook app with HTML5. In terms of performance, Fastbook actually beat the Facebook web app on the iPhone. Thus, Sencha has always taken the stance that HTML5 is ready to deliver the performances customers and users expect.

Admittedly, back then the tools for building HTML5 apps weren’t as good as what we have now, devices weren’t as powerful, and certain implementations of the HTML5 spec was just ratified by the W3C group a few weeks ago.

Now the ecosystem for HTML5 is far better than it was before, but even so, Sencha believes Facebook’s rational for pulling out of HTML5 is not founded on truth. On the other hand, Sencha will continue to fully commit itself to the HTML5 ecosystem, and every Sencha product is based on or supporting web development.

Finally, if you’re interested in seeing how Sencha Ext JS works yourself, you can try it for free for 30-days.