First Thoughts Learning Ext JS 4.1

First Thoughts Learning Ext JS 4.1 I wanted to share my thoughts on my progress learning Ext JS 4.1 as a developer new to Sencha. As an application developer I have used many different development environments and application frameworks throughout my career and whenever I learn something new I compare back to my experience. Overall I have been very impressed with Sencha frameworks as they provide a professional foundation to build an application atop.

h3. Interpreted

The single hardest shift for me is embracing the interpreted nature of JavaScript within the Ext JS framework in general. While not new to interpreted systems, I personally expect compiler emitted errors/warnings/flags, syntax auto-completion, and strong typing for member variables, return types and assignments. Having come most recently from Java, I find that being shown errors and autocompletion as I type is a great productivity enhancement but these benefits are tied to the nature of a strongly typed and compiled language. The general lack of these facilities in working with JavaScript is really the first hurdle in moving to web technology. Truth is, as I got more comfortable with the interpreted nature of the the language, I quickly found myself enjoying the advantages:

* JavaScript’s flexibility is a double edged sword. The language’s freedom is a joy but you must use best practices to avoid common pitfalls.
* Modern browsers offer developers great insight into application behavior at runtime. I have found the Chrome developer Console and Debugger JavaScript tools to be invaluable.
* Ext JS uses JavaScript as a meta-language to provide deeper OOP/MVC/Class Loading/Mixin support is very elegant for larger scale application development. These facilities exist in very few frameworks and really differentiate Ext JS and Touch. The ability to extend components or leverage a clean MVC pattern within an application make it very developer friendly as a framework.
* Leveraging JavaScript object literals and JSON for data/component instantiation is very productive. The ability to load components remotely, define UI as objects at runtime, and leverage client layout templating is very powerful. The syntax of larger object literals using xtype takes some getting used to. I found myself formatting my code more than normal to avoid the dreaded missing comma errors deep within an object literal.
* Using the Eclipse VJET Plugin was a great productivity boost for JavaScript and Ext JS development. The plugin provides auto-completion for JavaScript and there are several open source syntaxes for Ext JS. Being able to see instances, warnings/errors, and in-context return types is a very pleasant addition based on my past experience. “VJET”: “VJET+ExtJS”:

h3. Ext JS “Standard Library”

Ext JS provides a foundational set of helper classes and methods to make building applications easier. I found that the Ext.Array, Ext.Date, Ext.String, Ext.Object, Ext.Loader classes make working with data very easy and generally simplify building applications. Every application will use these common libraries and having them included and integrated into the framework is great.

Ext.require( [ 'widget.*' , 'layout.*' , '*' ] ); 
Ext.Array.each( [ 1, 2, 3, 4 ], function( name ) { console.log( name ); });
Ext.Object.getSize( { age:23 , height:6, name:"Ted" } );  //3

h3. Containers

Ext JS provides a rich set of containers (Ext.window.Window, Ext.panel.Panel, Ext.container.Container, Ext.grid.Panel, etc.) to allow developers to easily create nested views and more complex application logic. In Ext JS, containers’ layout behavior is programmatic and allows you to set the behavior of a container at runtime to ‘vbox’, ‘hbox’, or any of the Ext.layout.container types. Additionally you can set sizes dynamically by assigning values to the ‘flex’ property on items within a container.

h3. Xtype

Ext JS provides a loosely typed data format called Xtype to allow you to pass trees of containers and controls as a single object. It is a very, very powerful technique and really makes building lots of UI components at all at once easy. In Flex and Android I used declarative XML for component initialization and layout but these are closely tied into compiler workflow. In an interpreted system, you want to leverage a format that is rapidly parsed and supports remote loading. As Xtype is a JavaScript Object Literal, it is parsed at the speed of the JavaScript engine in use. On both mobile and desktop targets, this is very fast. While you can create components independently, using xtype for component generation is much more productive once you get the hang of it. Here are 3 xtypes passed within an Array:

[ { xtype: 'container', html:'First Item', flex:1 } ,
{ xtype: 'splitter' } ,
{ xtype: 'container', html:'Second Item', flex:1, maintainFlex:true } ]

If this were assigned to a container’s ‘item’ property, it would render a split view. I found this very simple and elegant, compared to the complexity in other frameworks.

h3. Styling

I have styled components in several frameworks. In Ext JS, abstracting style properties as runtime loaded CSS for all components is very powerful. Better still, generating CSS from the provided SASS/Compass source formats makes building a global style change quite easy. In both Flex and Android, style is baked in at compile-time and is less flexible than a runtime interpreted model. While I now feel comfortable generating a base color change in Ext JS, it will take me some time to absorb the finer details of CSS styling of the components. This is easily one of the more complex areas of the framework and will take me time to fully understand.

h3. Hello Sencha

Given this is my first real post on Ext JS on, I thought it would be good to post the simplest example possible. The example creates a window with an image inside. Feel free to paste into a local html file and open in a browser.

<!DOCTYPE html>
        <title>Hello Sencha</title>
        <link rel="stylesheet" type="text/css" href="">
        <!--extjs 4.0.2-->
        <script type="text/javascript" src=""></script>
        <script type="text/javascript">
            //define the application
                launch: function() {
                    //create a window
                    var win = Ext.create( 'Ext.window.Window' , {
                        title: 'Hello Sencha',
                        height: 285,
                        width: 250,
                        layout: 'fit',
                        //add an image to the window by an xtype object
                        items: {
                            xtype: 'image',
                            src: ''
                            beforehide: function( com, owner, opt ){
                                alert('hiding win');
                    //show the window

I will continue to document my journey learning Ext JS and Touch frameworks as I go. There is clearly a lot to learn and hopefully sharing my experience will help others new to Sencha. More to follow.


  1. Reynald says

    Great first article! I share the same feelings regarding ExtJS :)

    I downloaded and installed VJET Plugin for Eclipse. Can you send some hints about where can I find the open source syntaxes for ExtJS ?

  2. says

    I feel the presence of the (rather large) section “Interpreted” made me question the author as a valid source of a reliable review. I would have rather found it more valuable to hear from an experienced JavaScript expert. The title “Head first into JavaScript with ExtJS” would have been more accurate and might have been better published on some other site, not the actual Sencha site. It sounds like you’re not much of a front-end developer based on this article and as a follower of ExtJS through every iteration from 1.0 to today (including Ext Core and Sencha Touch) I’m disappointed after reading it. So inclusion, why is this on here?

  3. puritysdisciple says

    Generally the sencha blog is a heap of great knowledge that I am excited to read whenever it shows up in my RSS reader. However, this is an article about javascript, by a java developer, with a hint of Ext added in. Not something I would expect to see here.

    With that being said, the use of alert kind of makes me queasy, and there is a missing semicolon after the “)” when creating the window.

  4. Ted Patrick says

    Added the two links to VJET and VJET Syntax for Ext JS. Also added a semi-colon after the window creation, thanks @puritysdisciple. I am learning Ext JS 4.1 from scratch and the example above is using Ext JS 4.1 beta 1 via the CDN.

  5. Ted Patrick says

    @John Internally we are very focused on improving the quality of the Ext JS 4.1 framework and we are creating lots of new learning material and training for the release. I am learning 4.1 is to align with the QA efforts underway here at Sencha.

  6. Cristian says

    @Ted Patrick
    You mention VJET+ExtJS. But the link that you posted does not contain any details on how to install the ExtJS extension. There are only details about VJET…
    I agree with Paipai – this is just a commercial post without real value.

  7. Ted Patrick says

    @Cristian The Ext extention is experimental in the github repo here

    Regarding the “commercial post”, I can understand your perspective from an intermediate to advanced developer point of view, the post was my first steps with Ext JS. We are seeing lots of new developers coming to Sencha from other languages and my learning experience is helpful to them.

    That said, I am very interested in seeing the larger Sencha community contribute intermediate and advanced articles to the Sencha blog. If you are interested in writing an articles, please reach out to me at ted.patrick -at- Regards. Ted :)

  8. says

    It s really funny to see a former Java, Flex developer trying to promote a solution based on JavaScript.
    Companies like Google wont be creating stuff like Closure, GWT and latelly Dart if JavaScript was a half decent platform to build on. But what do they know :)

  9. Andy Davidson says

    Hi, I’m struggling to find any useful information on how to use ExtJS with VJET. The links in this post don’t link to anything that appears to be useful. Any chance of anyone posting a link to a tutorial?

  10. says

    Well, I can find everything but extjs typelibraries. Everyone else appears to be represented, but extjs is not, as far as I can see:

    Dojo 1.6
    EcmaScript Ed. 5 api updates
    HTML Canvas 2D API
    jQuery 1.4
    jQuery Mobile 1.0 Alpha 4.1 (Requires JQuery Type lib)
    Node.js 0.4

  11. Andy Davidson says

    same here Mark, i’ve taken a look at the github link posted by Ted but is in no way obvious how you use the contents as a typlib.

    I think it would be really useful if Ted could post a comment on how he got the extjs typlib working and where he got it from.

  12. Peter Bösenberg says

    Thanks for your article! I’m starting to learn the basics of ExtJS and this kind of articles really helps. Thanks a lot :)

Leave a Reply

Your email address will not be published. Required fields are marked *