Latest Ext JS 7.8 is now available. Learn more

First Look: Ext JS Bridge to Angular 2

October 6, 2016 185 Views

If you’re like me, one of the things you love most about Ext JS is the robust set of components that works together to help you build a great UI experience for your users. Add to that the great layout system in Ext JS, and dynamic features including theming, and you have the power to be very productive when creating compelling applications.

But the industry keeps changing, and since the release of Angular 2, some of you have been asked to look at Angular 2 as your base framework for HTML5 web application development.

If you’ve taken any time to look at Angular 2, one of the things that you’ll quickly realize is that it doesn’t come with any robust UI components, and you are left to decide how you’ll manage layout and theming within your application.

Wouldn’t it be nice, if you do decide to go with Angular 2, to have all of the robustness of the Ext JS components, along with all of the capabilities of the layout system, theming, and other features you’ve come to love about Ext JS?

Well, we have some exciting news for you! At SenchaCon in Las Vegas on November 7-9, we’ll be introducing the ability to use Ext JS components, layouts, and themes within an Angular 2 application, which we are currently calling the Ext JS Bridge to Angular 2 (also known as ‘The Bridge’).

In this article, I want to give you a sneak peek at this new functionality. Please note that I’m showing you syntax that may change as we complete The Bridge.

For those of you who’ve invested any time looking at Angular 2, you may know that you deliver functionality to your application by using ‘selector’ tags in html. Of course, you’re familiar with a <div> tag or a <span> tag, but imagine that whole components can be delivered with new tags – say a new <ext-grid> tag for an Ext JS grid component. Well, that’s exactly what you get with The Bridge.

Here is an example of a simple View in Angular 2 that uses the <ext-grid> selector with The Bridge.

Example of a Simple View in Angular 2 That Uses the Selector with The Bridge

This code will produce the following output – an Ext JS Grid.

Ext JS Grid

You can see the <ext-grid> selector on lines 6-11. The example is using three properties, denoted in Angular 2 by the [ ] syntax. Each property (including columns, store, and config) is set in the class by variables on lines 15-31. There is also a select event, which uses the Angular 2 event syntax, the round brackets ( ). That select event is handled by the code on lines 33-35.

We’re also planning to provide capabilities to use the layout system of Ext JS from within your Angular 2 application.

Imagine being able to create your main page in Angular 2 with a set of selectors like this:

Use the Layout System of Ext JS from Within Your Angular 2 Application

Another really great feature of The Bridge is that all of the Ext JS components that you use within an Angular 2 application can take advantage of a common Ext JS Theme – you can even use the new Sencha Themer product to create those themes.

To see more details and get a live look at the Ext JS Bridge for Angular 2, make sure you check out my session at SenchaCon. If you haven’t signed up for SenchaCon, head over to the SenchaCon site and register.

Looking forward to showing you more of the Ext JS Bridge for Angular 2 at SenchaCon. Also, I’ll be doing a pre-conference session ‘Tech-Talk: Ext JS and Angular 2’. It’s Monday afternoon from 1-5pm before the conference starts, and there’s no additional charge to attend. So, if you get in on Monday, please join me.

Recommended Articles

8 Must-Know Tips for Choosing the Right Web Application Framework for Your Project

Starting web application development on a project can feel like a very difficult task. The abundance of frameworks adds to the confusion. It leaves developers…

Web Application Development | Top 10 Frameworks in 2024

If you are a developer, you must know the role of frameworks in creating amazing applications. Web application development frameworks come with pre-built tools to…

Understanding the Difference: When to Use Ext JS Classic vs. Modern Toolkit

Ext JS is a JavaScript framework for building powerful web and mobile applications. The framework features over 140+ high-performance, fully tested, and customizable UI widgets/components.…

Ext JS 7.8 Has Arrived!

The Sencha team is pleased to announce the latest Ext JS version 7.8 release. Following the 7.7 release, which included numerous quality enhancements in Ext…

How to Work with Ext JS Models and Stores: Tutorial on Managing Data and State

Ext JS is a popular JavaScript framework for creating robust enterprise-grade web and mobile applications. The framework offers a rich set of high-performance and fully-tested…

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 not the case anymore. Modern software development requires apps to…

View More