In Sencha Touch 2, we introduced the newest iteration of our MVC architecture. Based on the same concepts found in the Ext JS 4 and Sencha Touch 1 MVC package, we have simplified existing features like control and reference syntaxes and introduced new functionality like routes and history support.

In this article, we will take the existing code we have created and upgrade it to use Sencha Touch 2 and the updated application architecture. We will discuss some of the differences in syntax and talk about some of the new concepts to consider. At the end of this article, you should be better prepared to go into your existing app Sencha Touch 1 app and upgrade it to Sencha Touch 2, provided it is architected based on the principles discussed in the previous articles.

Ext.application

Initializing your application has remained much the same compared to Ext JS 4. Controllers, views and models are included the same way, and you continue to define the launch and init methods. For a detailed overview of the capabilities in the new application object, I suggest you read the following http://docs.sencha.com/touch/2-0/#!/guide/apps_intro guide. We used used autoCreateViewport in our app which has been deprecated. You are now expected to instantiate your main view. The following code shows how we instantiate our Main view in the launch method.

/app/app.js

Ext.application({
    name: 'Pandora',

    views: ['Main'],
    models: ['Station', 'Song'],
    stores: ['Stations', 'RecentSongs', 'SearchResults'],
    controllers: ['Station', 'Song'],

    launch: function() {
        Ext.create('Pandora.view.Main');
    }
});

The config object

In Sencha Touch 2, we are fully relying on the class system’s config system. This not only has several benefits to the frameworks code base but also for your application code. It makes your views, controllers and models more consistent and predictable. I recommend reading the http://docs.sencha.com/touch/2-0/#!/guide/class_system guide, as it thoroughly explains the capabilities of the class system, including the configuration system.

Views

So let’s start by converting our Main view to the new config system.

app/view/Main.js

Ext.define('Pandora.view.Main', {
    extend: 'Ext.Container',

    requires: [
        'Pandora.view.NewStation',
        'Pandora.view.SongControls',
        'Pandora.view.StationsList',
        'Pandora.view.RecentlyPlayedScroller',
        'Pandora.view.SongInfo'
    ],

    config: {
        fullscreen: true,
        layout: {
            type: 'hbox',
            align: 'stretch'
        },
        items: [{
            docked: 'top',
            xtype: 'toolbar',
            height: 80,
            items: [{
                xtype: 'newstation',
                width: 150
            }, {
                xtype: 'songcontrols',
                flex: 1
            }, {
                xtype: 'component',
                html: 'Pandora<br>Internet Radio'
            }]
        }, {
            width: 250,
            xtype: 'panel',
            id: 'west-region',
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [{
                xtype: 'stationslist',
                flex: 1
            }, {
                html: 'Ad',
                height: 250,
                xtype: 'panel'
            }]
        }, {
            xtype: 'container',
            flex: 1,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [{
                xtype: 'recentlyplayedscroller',
                height: 250
            }, {
                xtype: 'songinfo',
                flex: 1
            }]
        }]
    }
});

The first thing to note is that we are extending Ext.Container instead of Ext.Viewport. In Sencha Touch 2, there is always a Viewport instantiated. It takes up the full screen by default and uses the card layout. By defining the fullscreen property on a component, it will automatically be added to this Viewport.

We also see that we have defined all of our item configurations inline in the config block. In Ext JS, we have always required that you define any complex configurations (Objects and Functions) inside the initComponent method. This was required because we needed a unique copy of these complex objects in each prototype. However, the class system in Sencha Touch 2 will deeply merge the config block when you create a subclass. This allows the View files to become cleaner and easier to understand.

Since our current app was written for Ext JS, and Sencha Touch has some minor differences in item configurations, it is also useful to note that dockedItems has been deprecated and you are able to just define docked items inside the items collection. The docked configuration will allow you to dock any item to any side of the container.

I won’t go into the details of each View definition in this article, but you can browse through the attached source code to see the changes I had to make to convert the Views from Ext JS to Sencha Touch 2.

Stores and Models

Even though the data package has been updated to use the configuration system, and in the process has been entirely refactored and cleaned up, the API has stayed identical to Sencha Touch 1 and Ext JS 4. This means that in order to update our Stores and Models, we only have to worry about moving all the configurations into the config blocks. Here are the Station model and the Stations store after making these changes.

app/model/Station.js

Ext.define('Pandora.model.Station', {
    extend: 'Ext.data.Model',

    config: {
        fields: ['id', 'name'],

        proxy: {
            type: 'ajax',
            url: 'data/stations.json',
            reader: {
                type: 'json',
                rootProperty: 'results'
            }
        }
    }
});

app/store/Stations.js

Ext.define('Pandora.store.Stations', {
    extend: 'Ext.data.Store',
    requires: 'Pandora.model.Station',

    config: {
        model: 'Pandora.model.Station'
    }
});

Controllers

So far we have looked at Views, Stores and Models. Although there are minor differences in these elements between Ext JS 4 and Sencha Touch 2, most of the new functionality and syntax has been introduced in the Controllers. Let’s start by converting one of our existing controllers to the new syntax and discuss the changes.

    Ext.define('Pandora.controller.Station', {
        extend: 'Ext.app.Controller',

        config: {
            stores: ['Stations', 'SearchResults'],

            refs: {
                stationsList: 'stationslist',
                newStationSelect: 'newstation'
            },

            control: {
                stationsList: {
                    select: 'onStationSelect'
                },
                newStationSelect: {
                    change: 'onNewStationSelect'
                }
            }
        },

        launch: function() {
            console.log(this);
            debugger;
            var stationsStore = Ext.getStore('Stations');
            stationsStore.on({
                load: 'onStationsLoad',
                scope: this
            });
            stationsStore.load();
        },

        onStationsLoad: function() {
            var stationsList = this.getStationsList();
            stationsList.select(0);
        },

        onStationSelect: function(list, record) {
            // Fire an application wide event
            this.getApplication().fireEvent('stationstart', record);
        },

        onNewStationSelect: function(field) {
            var station = field.getRecord(),
                store = Ext.getStore('Stations'),
                list = this.getStationsList();

            if (station && !store.getById(station.getId())) {
               store.add(station);
            }
            list.select(station);
        }
    });

References

As you can see, the syntax for references has slightly changed. The old refs block looked like the following.

refs: [{
    ref: 'stationsList',
    selector: 'stationslist'
}]

The refs value has changed from being an array to being an object. Each key in the object represents the name of the references and the value is the ComponentQuery. In the previous articles, we also explained how you can leverage autoCreate and forceCreate to automatically create instances of the components you are selecting if they don’t exist on the page yet. In the new syntax, you could achieve that by doing the following.

refs: {
    stationsList: {
        selector: 'stationslist',
        autoCreate: true
    }
}

The value here becomes a configuration object where the selector is your ComponentQuery.

Controlling views

Another thing to note is the new control config. Instead of defining your view control listeners inside the init method like we did previously, we now define these listeners directly as part of the controller configuration. Let’s have a look at the old {Sencha Touch 1?} control code.

init: function() {
    this.control({
        'stationslist': {
            selectionchange: this.onStationSelect
        },
        'newstation': {
            select: this.onNewStationSelect
        }
    });
}

It’s possible for this logic to be moved into the controller configuration because the listener functions can now be simply referenced as strings. The keys in the control object can still be strings, in which case we assume they are component queries. We did however add the capability to use the reference that you have set up in the refs block. We did this because we saw that people had to write out the same component query most of the time both for setting up a reference and actually controlling an event for the same view referenced.

Getters

In the Ext JS 4 controller class, we automatically generated getters for any stores, models and controllers defined in the controller’s configuration. However, we have found that generating these getters can be quite expensive at the start of the application, so we have deprecated this automatic generation for Store, Model and Controller getters. We still generate the getters for all of the defined references in the refs configuration. To get a reference to a store, you should use the Ext.getStore() method. Models can be referenced by just using the class name. For example, to call a static method on the Station model we could just use Pandora.model.Station.someStaticMethod(). A controller can be retrieved by calling this.getController().

Also, instead of referencing the application instance by using this.application, you should now use the getter this.getApplication(). This is useful when binding to or firing application-wide events.

Summary

In this part of the series, we looked at the differences between Ext JS 4 and the new Sencha Touch 2 application framework. We’ve reviewed some slight differences in syntax, some deprecated functionality, as well as new functionality in Views and Controllers.

That application you just deployed? As experienced software developers, we all know it won’t be long before you’re going to need make to significant UI changes. Regardless of the amount of painstaking forethought, consensus gathering and planning backing it, no software design ever survives first contact with its users unscathed. To deliver truly effective software, we have to be prepared to adapt to an evolving understating of our users’ needs.

So… how do we architect our software, so we can rapidly implement UI changes without breaking the underlying business logic?

Model View Controller (MVC)

It starts by applying structure to our code, separating it into manageable units where each is responsible for a specific application concern. To this end, most software applications employ the Model View Controller architectural pattern. There are a wide variety of implementations of this pattern; software development pundit Martin Fowler has catalogued many of those variations here.

Typically, with an MVC architecture, the:

• Model describes and manages application domain data behaviors and state, and responds to requests to retrieve or persist changes to that state.
• View presents model data to the user, accepts user input, and announces high-level user gestures such as clicks or selection changes.
• Controller mediates between the model and view, listening for user gestures to initiate actions on the Model, and instructing the View to reflect Model changes.

By separating the user interface components and layout (the View) from the logic that observes corresponding user gestures (the Controller) ands triggers business logic or changes to application domain data (the Model), your application is better positioned to adapt to inevitable changes.

Deft JS MVC

Deft JS enhances the Model View Controller (MVC) within Sencha Frameworks, where the:

• Model is expressed using ‘faceless’ business logic components, such as Ext.data.Store and Ext.data.Model.
• View is realized using any of the rich suite of Ext JS or Sencha Touch containers and components.
• Controller is implemented by creating view-specific controllers that extend the Deft.mvc.ViewController class.

Deft JS View Controllers

Consider a view to be a composition of multiple components in a container. A View Controller is a lightweight controller responsible for managing the state of a specific view and its child components, listening for events dispatched by the view and its child components in response to user gestures, and delegating work to injected business models and services (such as Ext.data.Stores, Ext.data.Models, etc.).

With Deft JS, a view is typically a subclass of an Ext JS container class, populated with component items. The view is configured to use the Deft.mixin.Controllable mix-in, and annotated with the class name of the associated View Controller. For each view, you would create a corresponding View Controller class that extends Deft.mvc.ViewController. This view-specific view controller would be configured to reference relevant view components and register view controller methods to handle view component events.

The Deft JS View Controller and Controllable mix-in:

• Provide class annotation driven association between a given view and its view controller
• Clarify the role of controller classes – i.e. controlling a specific view
• Support multiple independent instances of a given view, each with its own unique view controller instance
• Reduce memory usage by automatically creating and destroying view controllers in tandem with their associated views
• Offer concise configuration for referencing view components and registering event listeners with view controller methods
• Integrate with the view destruction lifecycle to allow the view controller to potentially cancel removal and destruction
• Simplify cleanup by automatically removing view and view component references and event listeners

Deft JS Dependency Injection

Most model, view and controller objects are not self-contained; they reference and delegate some of their work to other objects; these objects are referred to as dependencies. Typically, you might explicitly create instances of these dependencies or manually request them from a service locator.

To encourage loose coupling between application components, Deft JS includes a lightweight Inversion of Control (IoC) container for dependency injection. When applying the principal of Inversion of Control, you annotate your class with a list of its dependencies instead of manually creating or obtaining them. When your class is later instantiated, the IoC container is then responsible for resolving those dependencies with the correct object instances, injecting those values into your class at runtime.

With IoC, your class is no longer responsible for creating its dependencies or knowing where its dependencies are defined. Further, it is no longer bound to a specific implementation of a dependency. Provided it offers the expected API, you can configure the IoC container to inject a totally different implementation.

Consequently, you can easily test your classes in isolation by configuring the IoC container with mock versions of any dependencies. You can also create multiple variants of your application, where the IoC container in each is configured to use different implementations of shared dependencies such as Stores or Proxies; one might be configured to use mock Stores and Proxies driven by static JSON files, and another configured to use Stores and Proxies that access production services via JSONP.

The Deft JS IoC Container and Injectable mix-in:

• Provide class annotation driven dependency injection
• Map dependencies by user-defined identifiers
• Resolve dependencies by class instance, factory function or value
• Support singleton and prototype resolution of class instance and factory function dependencies
• Offer eager and lazy instantiation of dependencies
• Inject dependencies into Ext JS class configurations and properties before the class constructor is executed

Example

Imagine a view within a Contact Manager application containing a grid of contacts:

Ext.define( 'ContactsApp.view.ContactGridView',
    extend: 'Ext.container.Container',
    mixins: [ 'Deft.mixin.Controllable', 'Deft.mixin.Injectable' ],
    inject: [ 'contactStore' ],
    controller: 'ContactsApp.controller.ContactGridViewController',
 
    config: {
        contactStore: null
    },
    ...
    initComponent: function() {
        this.items = [{
            itemId: 'contactsGrid',
            xtype: 'gridpanel',
            store: this.getContactStore(),
            ...,
            bbar: Ext.create( 'Ext.PagingToolbar', {
                store: this.getContactStore(),
                ...
            })
        },
        ...
        {
            xtype: 'container',
            ...
            items: [{
                itemId: 'editButton',
                xtype: 'button',
                text: 'Edit'
            }],
            ...
        }];
    }
);

This view class is configured to be injectable, using the Deft.mixin.Injectable mix-in, and its dependencies are described using the ‘inject’ class annotation.

When this view is instantiated via either Ext.create() or Ext.widget(), the IoC container will resolve the ‘contactStore’ dependency and inject the associated value into the ‘contactStore’ configuration. The generated getContactStore() accessor function will return that injected value.

Additionally, this view class is configured to be controllable, using the Deft.mixin.Controllable mix-in, and its controller is specified using the ‘controller’ class annotation.

When this view is instantiated, an instance of the specified view controller class will also be created and configured with a reference to the view. When the view is destroyed, the view controller will also be destroyed.

Ext.define( 'ContactsApp.controller.ContactGridViewController',
    extend: 'Deft.mvc.ViewController',
    mixins: [ 'Deft.mixin.Injectable' ],
    inject: [ 'contactStore' ],
 
    config: {
        contactStore: null
    },
 
    control: {
        contactsGrid: {
            click: 'onContactsGridClick'
        }
        editButton: {
            click: 'onEditButtonClick'
        }
    },
    ...
    destroy: function() {
       if (this.hasUnsavedChanges) {
           // cancel destruction
           return false;
       }
       // allow destruction
       return this.callParent( arguments );
    },
    ...
    onEditButtonClick: function () {
        this.getEditButton.setDisabled( false );
    },
 
    onContactsGridClick: function () {
        // add a ContactEditorView to the TabPanel for the selected item
        ...
    },
);

This view controller extends the Deft.mvc.ViewController abstract base class, which provides a ‘control’ configuration that simplifies the creation of view component accessors and registering view component event listeners.

In this example, the grid and button are referenced implicitly by their itemId (custom selectors are also supported) and their ‘click’ events are configured to be handled by corresponding view controller methods. Two accessor functions will automatically be created: getContactsGrid() and getEditButton(). When the view is destroyed, the view controller's destroy() method will be called, allowing it to cancel view destruction. If this method returns true, the view will be destroyed, and all references and event listeners created in the view controller using the ‘control’ configuration will automatically be removed.

The IoC container is typically configured in the main application JavaScript file, within Ext.onReady(), using the Deft.Injector.configure() method.

Ext.onReady( function () {
    Deft.Injector.configure({
        contactStore: 'ContactsApp.store.ContactStore'
        // contactStore: 'ContactsApp.store.MockContactStore'
    });
});

In this example, the Deft JS IoC container has been configured to fulfill all requests for ‘contactStore’ with a singleton instance of ContactsApp.store.ContactStore. The commented line shows how simple it would be to specify a mock class instead.

About Deft JS

Deft JS is an MIT-licensed open source framework that extends the Ext JS and Sencha Touch APIs to provide:

• Loose-coupling and dependency injection via an Inversion of Control (IoC) container
• Flexible component-oriented architecture through an alternative Model View Controller (MVC) implementation
• Elegant asynchronous operation chaining and data processing using Promises and Deferreds

Created by a team of software architects working at the innovative digital solutions agency Universal Mind, Deft JS leverages best practices and proven patterns refined over years of delivering cutting edge solutions across a wide range of platforms and devices.

Our new application has two versions, a consumer experience and a dealer experience. One of the features that makes the dealer experience unique is the ability to send parts of the application to large screen televisions placed around the dealership. The app takes full advantage of the real estate that a tablet computer has to offer and provides immersive experiences to the user via full screen images, serving video and a wealth of information. The application contains up to ten different car nameplates.

Burrows used the card layout and new Viewport floating panel system to create overlays. With the Sencha Touch swipe event, navigating through the pages is fast and smooth.

Why We Chose Sencha Touch 2

In 2011, we chose Sencha Touch as our mobile framework. It was light years ahead of the other JavaScript frameworks on the market and provided a great API to aid in the transition of our Flash Platform developers to JavaScript. As a company, we really aim for a ‘one codebase’ to fit all solutions, and Sencha was our best chance of achieving this goal. We built apps in Sencha Touch 1 for clients including Ford.

With the prospects of the new Ford Showroom App, we did some thorough testing and found that Sencha Touch 2 continued to offer the best components and features. As a company, we made the decision to use Sencha Touch 2. If you want to write object oriented JavaScript, there is no easier place to start. The ‘extends’, ‘requires’, ‘statics’ and ‘constructor’ is the best foundation any JavaScript novice or pro could ask for. What we have learned is every byte counts, and using the lazy loading AJAX and JSONP features in Sencha Touch 2 to request your JavaScript files and data is a great way to keep memory down and only request code when needed.

Layouts are our most utilized feature in Sencha Touch 2, due to their flexibility to create cross platform applications. The Showroom application will be available on both Android and iOS. We make great use of the VBox and HBox layouts along with the flex configuration property to make the app resolution-independent. The layouts allow the app to stretch to any size easily and handle the content within the containers. Switching through the views and getting the data is easy using Sencha MVC technology which is built right into the framework.

Throughout the application, we built custom components. DotNavigation is one of my favorites. It’s a simple dynamic indicator for a toolbar that we used for a card layout or carousel to show which page the user is viewing. It helps users easily navigate around views in a very app-like fashion, taking advantage of CSS3 animations.

In the dealer release of the application, we allow communication to a server through the Sencha Touch web API that enables the dealer to send high res images and videos to large screen televisions around the dealership.

Business Value of Using Sencha Touch 2

The value goes first and foremost to our clients. The days of companies just wanting an iOS based application are over. Now, it’s all about cross platform and how many Android tablets and iPads you can support. The cost savings of not developing twice can add up to the hundreds of thousands and during a recession every penny counts.

For our developers, the efficiency gain is almost immeasurable. Without Sencha Touch, we would still be working out how to make a momentum-based touch scroller. Instead, using Sencha technologies we can make prototypes in hours, not days.

Our Advice to New Developers

The biggest piece of advice we have for other developers is: go with the framework, do not fight against it. It is easy as a web developer to dive in and start forcing your own CSS and HTML into components to bend views to your will. Littering your CSS files with position absolute and float left. The layouts and components provided with Sencha Touch are fantastic and really flexible. Read all about them in the Sencha documentation, and you will love the framework.

For all newcomers, read the API. Sencha offers great documentation and support forums. Read through the ‘Hello World’ examples and watch the videos. You don’t need to know a lot to get started, but with a few fundamentals you will go a long way. The built-in MVC architecture is great and a rapid way to develop. However if you are new to design patterns, do not confuse yourself, take the time to get familiar and read about the pattern first.

Final Thoughts

Burrows recommends Sencha Touch 2 to any company or developer. Whether for speed, platform penetration, or just the need to make JavaScript an easier transition from developing in another language. Sencha products have a great community, are full featured and for Burrows, the only JavaScript framework for creating mobile applications.

This article will help you understand the Sencha command utility as it’s used for your Sencha Touch 2 application’s build process.

This article is written with the assumption that you are already familiar with Sencha Touch 2 SDK, SDK Tools and basic operations using the Sencha command utility. If you aren’t familiar with these topics yet, head to the Getting Started Guide and learn how to quickly setup your development environment and generate a working Sencha Touch 2 application.

How It Works

The Sencha command utility is a pure JavaScript application running within the Node.js runtime. The source code is located inside the command directory of the Sencha Touch 2 SDK. This application requires that Node.js and other tools exist on your system, such as PhantomJS, Open-vcdiff, Closure Compiler, YUICompressor, etc. These binaries are included in the SDK Tools installer, so you don’t have to worry about downloading them yourself.

After the SDK Tools is installed, from a command line or Terminal, sencha command simply delegates to the following:

/path/to/sdk_tools/bin/node /path/to/sdk/command/sencha.js [arguments…]

with /path/to/sdk_tools being where the SDK Tools were installed, and /path/to/sdk/command being the path to a Sencha command utility directory. It is that simple.

Application Structure

The Sencha command utility helps you create a fresh new application with a one-line command:

sencha app create MyApp /path/to/myapp

Two of the most important parts from the output are the sdk directory and the app.json file.

The ‘sdk’ directory

This directory is a copy of the SDK from which the application was generated. This way all your application source code is self-contained which makes it easy to archive, share and version-control. Also, to upgrade or downgrade an existing application, you simply replace the sdk directory.

However, if for some reason you need to change the name of this directory or store it in a different location outside of the application, simply edit its path in the .senchasdk file. This special file gives the Sencha command utility a hint on where to look for the SDK within the current working directory.

The ‘app.json’ file

Getting a Sencha Touch 2 application up and running can be as simple as creating an HTML document and including a bunch of JavaScript / CSS files in the right order. However, when it comes to deployment, things can get complex quickly, and there is a lot of work involved in optimizing your application in a production environment. Usually pre-production optimization boils down to:

• Minimizing network payload size
• Minimizing the number of HTTP requests
• Providing instant UI feedback when the application is loaded for the first time
• Caching non-frequently changed resources on the client, when possible
• Minimizing network transfer when updating between different versions

In other words, that means:

• Figuring out a minimal list of dependencies your application needs instead of including the whole library
• Concatenating separate JavaScript/CSS assets into single bundles and minifying them
• Using asynchronous loading mechanism
• Storing all JavaScript/CSS assets locally on first load and evaluating them on subsequent access without any network connection required
• Generating deltas between all versions of your application and automatically instructing the client to download and then patch their local copies

In order to automate all of that for you in just one single command (sencha app build), the Sencha command utility needs to know everything about your application’s structure, for example:

• Where the required JavaScript/CSS files are, and in what order to include them
• What update mechanism to use for each of these assets
• What files and directories to copy along when doing the build
• Where to generate the builds

All of this information is contained inside a JSON-formatted configuration file named app.json. Two of the most important configuration items to be highlighted here are “js” and “css”.

With the new application structure, JavaScript and CSS assets should never be physically linked inside the HTML document (for example, manually added as <script>, <style> or <link> tags). Instead, they should be specified and maintained inside app.json as array of JavaScript and CSS items in the right execution order for the “js” and “css” keys, respectively. Such items may look like this:

"js": [
    {
        "path": "sdk/sencha-touch.js"
    },
    {
        "path": "app.js"
    },
    {
        "path": "vendor/foo-library.js"
    },
    {
        "path": "3rd-party/analytics.js"
    }
]

This enables the use of the micro-loader, as described below:

The Micro-loader

The micro-loader was first introduced in Sencha Touch 2.0.0-GA. It is a small script that is responsible for loading up all JavaScript/CSS assets asynchronously, caching them locally, and updating their local copies when a new version of the application is deployed.

In fact, it is, and should be, the only script that is physically included inside your HTML document. During development, every time the application loads, the micro-loader simply requests and parses your app.json file, then dynamically loads all of your JavaScript/CSS assets in the specified order.

In a production environment, however, this process only happens once. Upon completion of the first load, the content of each asset is stored locally inside the client browser’s Local Storage. As a result, subsequent access to the application requires absolutely no network connection. The asset’s content is retrieved locally and evaluated immediately, still in the right execution order, and as fast as the device’s CPU can handle. Your application not only is offline-capable, it also loads in a “blink” on mobile devices.

But, you may wonder, doesn’t HTML5 application cache already provide all of those features? That question brings us to the next section.

The Delta-update Mechanism

HTML 5 Application Cache seemed like a dream come true to web developers when it was first introduced. If you are new to this feature, we highly recommend that you read this beginner-friendly article to have a better understanding of the subject. As a quick summary, your web application can finally run without the device always having to be online. All specified assets inside the manifest file will be retrieved for the first time and cached locally. Sounds perfect, but what happens when an asset’s content changes on the server-side?

When using HTML5 Application Cache, a GET request is made in the background to retrieve the content of your manifest file every time your application loads. This newly retrieved content is then compared to the old one that was stored locally from the last time your application was used. Any difference in the comparison indicates that something has changed, and an update is required. The browser then makes a new GET request for each and every cached item listed in the manifest file to retrieve its latest content and refresh the cache.

In other words:

• The browser knows something has changed but doesn’t know exactly what. That could mean all of your images and JavaScript files have to be pulled down again, even if you only tweak some styling in one CSS file. With the current state of this feature and the current format of the manifest file, there is no way to specify only the items that were modified and reduce all the unnecessary requests.
• The update mechanism is still a full update. The whole file content is downloaded again even if you might only have changed a few lines of code. In reality, for rich web applications such as those written with Sencha Touch, that means hundreds of KB wasted for a few KB of code change. This becomes a serious drawback especially for mobile devices when cellular data connections are often slow, unreliable, and expensive with limited bandwidth. For businesses, rolling out updates as frequently as possible with small and incremental changes has always been a rule-of-thumb. Yet, this limitation makes that practice painful to watch.

That is where Sencha Touch 2 micro-loader comes into play with its built in delta-update mechanism. This simplified diagram illustrates the process:

Each time you make code changes and build the application for production, the Sencha command utility stores a copy of each asset that has been changed. This is called archiving. By keeping all previous versions of the assets in the archive directory, it can then generate a delta between each version. Client devices will then download the right delta content and patch their own Local Storage copies to become identical with the latest ones.

Similarly to the manifest file mechanism in HTML5 Application Cache, once your application finishes loading, the micro-loader issues a GET request in the background to check if there’s any update (only if the device is currently online). This information is presented in JSON format, with each asset having its latest checksum values. By comparing these checksum values with the previously cached ones, it knows exactly what asset has changed and proceeds with the patching process.

This solves both problems we mentioned earlier in the most optimal way. Even better, it is not meant to replace HTML5 Application Cache. In fact, both mechanisms are used together to perfect the solution. Local Storage caching and delta-update are only suitable for text-based assets such as JavaScript and CSS. Binary resources like images and videos should still be handled using the manifest file.

Summary

The Sencha command utility was born to automate many of your repetitive tasks during a project development cycle, while ensuring the outputs are optimized. I hope this article helps you gain some essential understanding of the work that the Sencha command utility does behind the scenes.

We're excited to announce the general availability of Sencha GXT 3.0! Sencha GXT, previously known as Ext GWT, is our popular Java based web application framework that leverages the Google Web Toolkit compiler. With Sencha GXT 3.0, developers can build high performance web applications with cross-browser compatibility across all desktop browsers.

Download Sencha GXT

Easier to Learn

This major release has given the GXT team a chance to take a step back and reconsider existing features and API design. We’ve made a number of breaking changes from Ext GWT to better support current GWT features and best practices, to make the library easier to use and theme, and to plan for future improvements both in GWT and GXT.

To make existing projects easier to upgrade, we’ve also ensured that Ext GWT 2 and GXT 3 can be run in the same project. Check out Running Version 2 and 3 together for more information.

GWT Events & Handlers

Ext GWT 2.0 had a custom event and listener API that was written before GWT released its Events & Handler API. With GXT 3.0, we have replaced this custom event system in favor of the built-in GWT Handler API. Now GXT components accept handlers and fire events in the same way as other GWT widgets. This makes adding event handler methods in uibinder-enabled projects easier, and removes the need to send some events through an EventBus and others through Observable objects. This change also makes it easier for a developer’s IDE to give them hints about events that can be fired, and assists users with autocomplete to quickly write strongly typed handlers for these events.

GWT Based Rendering

With Ext GWT 2.0, components rendered their DOM structure lazily. That is, the component’s DOM elements were not created when the component was constructed. This behavior differed from that of GWT Widgets, which create their DOM elements immediately. This difference managed to confuse some users, and required them to take special precautions in order not to access components that had not yet been created.

With GXT 3.0 we're opting for the GWT model which means that there is consistent behavior when working with both GXT Components and GWT Widgets. This makes use of the widgets more predictable, as there is no need to be certain that some calls are only made pre- or post-render.

Strongly Typed Layout Engine

GXT 3.0 introduces strongly typed layout containers. This is in contrast to Ext GWT 2.0, where a generic layout container could be given any layout. Because the container was generic and not strongly typed, it was possible to use the API incorrectly. For example, in 2.0, it was possible to use the wrong type of layout data for a given layout. With 3.0, the API now forces the correct use of layout data for each container type.

Full UiBinder Support

GWT 2.0 introduced the ability to construct user interfaces in a declarative way using XML files. To support UiBinder in Widgets, several conventions had to be followed. These included implementing HasWidgets to allow a Widget to behave as a container, implementing HasHTML to allow raw HTML directly in panels, and adding @UiConstructor and @UiChild annotations in widgets to support custom behavior.

Ext GWT 2 was released prior to GWT 2.0 and thus did not have support for UiBinder. UiBinder support has been one of the major driving factors for many of the API changes in Sencha GXT 3.

GXT 3 has a library to make it easier to create complex layouts in UiBinder files. These changes have been accepted by the GWT team for their upcoming 2.5 release, and in the meantime, are available in the uibinder-bridge jar, available as part of the GXT 3 download.

For a more detailed look, see our Learn article about Declarative Markup with UiBinder in Sencha GXT 3.

<ui:UiBinder
    xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:gxt="urn:import:com.sencha.gxt.widget.core.client"
    xmlns:button="urn:import:com.sencha.gxt.widget.core.client.button">
 
<gxt:FramedPanel collapsible="true" headingText="Example" pixelSize="100, 80">
  <button:TextButton ui:field="exampleButton" text="Click Me" />
</gxt:FramedPanel>
 
</ui:UiBinder>

Core Improvements

Improved Model Support

In Ext GWT 2, several model object interfaces and base classes were provided, such as ModelData, TreeModel, BaseModelData. These types allowed for a species of pseudo-reflection by making each model responsible for tracking the mapping from a String key to the referred property. This could make it difficult to use existing POJO beans and to write code in a type-safe way. It also made it difficult to effectively use AutoBeans and RequestFactory.

GXT 3 now supports any bean-like object, with public accessors (getters and setters) through its XTemplates. PropertyAccess also provides a mechanism to generate ValueProvider instances. ValueProvider handles changing and reading values from outside the models in a generic way.

With these changes, users have the flexibility to use their own domain objects without being required to use GXT model classes or implement GXT model interfaces.

Data Loading, Reading, & Writing

The Store classes continue to be the basis for client-side data management in GXT 3. Loaders, DataProxys, and Readers are still the ideal way to provide the data for Stores. As in 2.0, there is no requirement to use them - data can be added directly to the stores. However, we’ve greatly improved their generics and made it easier to send data to and from the server in a variety of ways. For those who choose to take advantage of these classes, the GXT 3.0 data classes are a huge improvement in developer convenience and productivity.

Ext GWT 2.0 used the introspection-like features of ModelData to allow access to data within an object. With GXT 3.0, ValueProvider instances can be used to generically refer to individual nested properties, and GWT’s AutoBean functionality can be used to turn bean interfaces into data loaded to and from the server. The HttpProxy and ScriptTagProxy classes can both generate XML or JSON for the objects sent to the server. Alternatively, they can also generate simple URL-encoded data. Furthermore, readers can easily map JSON properties or simple XML x-paths to bean properties.

Loaders and Proxies now use specific generics to avoid confusion about the type of model or data that is expected from or that will be produced by any particular object. This avoids many common problems, such as class cast exceptions, that occur when less stringent typing is used. These additional type parameters can make object declarations more verbose, but also more precise. These changes result in better static code checking from your IDE or compiler. The Explorer demo shows how to turn both XML and JSON into trees or lists to be consumed by their appropriate Stores.

For additional information, see our introduction to Data in our blog post for Developer Preview 1.

Interface Based Design

Projects using GXT often work with large, complex user interfaces, and to keep these projects easy to maintain and test it is important to separate discrete units of functionality. In this way, any unit can be tested or replaced without greatly affecting other units. GXT 3 makes it easier to mock and replace the components and event sources by implementing meaningful interfaces wherever possible. For many events, we implement a HasHandlers interface from GWT, such as for HasSelectionHandlers on components that allow logical selection of data, whereas for others such as the Stores, we provide our own events and handler interfaces to accurately describe what is happening in each case.

In some instances where GWT provides interfaces for events that seem reasonable, we avoid using them in favor of more comprehensive events. For example, TextButton implements HasSelectHandlers rather than HasClickHandlers, because buttons can be selected through the mouse or keyboard. If handlers were only added for ClickEvents, a user interface could miss keyboard selection of their forms.

Where possible, we declare many GXT 3 classes in a shared package, indicating that this code does not require being run in GWT, though it is designed for it. Stores and Loaders are two examples of this - they do not require actual GWT support so presenter classes that use them can be tested on a JVM instead of the much slower GWTTestCase.

Compile Time Templates

XTemplates are a powerful feature in GXT 3.0. Prior to 3.0, XTemplates were implemented using the same design and code as Ext JS. For 3.0, we decided to replace this JavaScript-based implementation with a solution better fitting GWT and the features it offers.

The new XTemplate design uses GWT Deferred Binding to process a template and generate GWT-optimizable Java to retrieve the data from any Java Bean. Data can be read from any Java Bean, ClientBundle or CssResources to make theming elements easier. Furthermore, there is no need to “convert” the data to a JavaScriptObject. The new design supports virtually all of the old XTemplate features and functionality, and now can be better optimized by the compiler.

In summary, the new XTemplate design is a much improved design over the previous XTemplate. We are leveraging GWT Deferred Binding to provide a GWT like solution.

interface TemplateTest extends XTemplates {
  @XTemplate("<div><span>{name}</span></div>")
  SafeHtml renderStock(StockProxy stock);

  @XTemplate(source="template.html")
  SafeHtml renderStockExternal(StockProxy stock);
}

For additional information, see our XTemplate blog post.

New Features

Cell Enhancements

GWT 2.1 introduced the Cell API, a sort of ‘Widget Lite’ mechanism to allow large numbers of elements to be rendered efficiently. These were often wrapped in a widget of some kind, yielding “high-performance, lightweight widgets composed of Cells for displaying data.” See this guide for background information on cells.

Cells use the flyweight pattern to use a single object to render many elements, and to handle incoming events for all of them in a consistent way. Many fields and other components in GXT 3 are implemented first in Cells, then wrapped in a Cell widget, allowing them to be drawn cheaply in a grid, or used as a field in a form, with the same basic features available in either case.

All GXT 3 data components support using Cells to draw their content, including ListView, Tree, Grid, and TreeGrid. (In contrast, Ext GWT 2 used either a GridCellRenderer to put together HTML content or a widget drawn in each cell, resulting in simple content, or very heavy grid elements). By using Cells instead, GXT 3 supports the best of both worlds, providing a solution to handle any high-performance interactive content. Take a look at the Cell Grid example. Fields can still be created as an editor for a column, allowing grid cells to alternate between rendered data and editable content, as in Ext GWT 2. Check out our examples of inline grid editing and row grid editing for details.

Custom Theming and Appearances

GXT 3 components and cells are responsible only for handling events and managing the data they are given. In Ext GWT 2, they also drew their html elements and css class names, resulting in components that could be difficult to modify, extend, and restyle. Through the use of the GWT Appearance pattern, we have factored out this content and style, and it is now easy to re-theme any widget, or all widgets of the same type in an application.

By using XTemplates and ClientBundles, we further ensure that elements are rendered from strings, not manipulated DOM elements, and that only the CSS and images which are presently being used are loaded into the DOM.

For additional information, see our Appearance blog post.

Plugin-free Charting

One of the most exciting new features of GXT 3 is the brand new, plug-in free, charting package. Built on web technologies (SVG and VML), the new charting package is a write-once, run-anywhere solution that doesn’t have third party dependencies. It works on every browser down to IE6, and because it’s all written in GXT it’s completely customizable and very easy to extend.

We’ve created pie charts, lines charts, area charts, radar charts and more — all animated, all easy to configure and all very extensible. We’ve included 23 charting and drawing examples for this release that show off many of the configurations available to you.

For additional information, see our Charting blog post.

Maven Support

As with our beta and release candidates, GXT 3.0.0 is available through maven central as well as through a downloadable zip. The groupId and artifactId are unchanged, and the new version is 3.0.0:

<dependency>
  <groupId>com.sencha.gxt</groupId>
  <artifactId>gxt</artifactId>
  <version>3.0.0</version>
</dependency>

The version in Maven Central is covered under GPLv3, and we’re now hosting our own repository for commercially licensed artifacts.

<repository>
  <id>sencha-commercial-release</id>
  <name>Sencha commercial releases</name>
  <url>https://maven.sencha.com/repo/commercial-release/</url>
</repository>

Please note that full Maven support for both GPL and Commercial will be available within a week of the Sencha GXT 3.0 release. Please subscribe to the forum post to get notified when full Maven support is available.

The GXT 3.x Roadmap

Sencha GXT 3.0 lays the groundwork for the next generation of web application frameworks. We are planning to add support for the Gray theme, and following that, we plan to introduce RTL and ARIA support.

Again, we thank the community for your bug reports, questions, and suggestions which have helped us in delivering this release. Sencha GXT 3 is a major advancement in the product line and we hope you enjoy using it.

• Sencha GXT
• Explorer Demo
• GXT API Documentation

Download Sencha GXT

The original Blackberry PlayBook browser, released this time last year, was already a very solid HTML5 browser. In our original PlayBook HTML5 scorecard, we noted that it was far superior to the Android 3 browser and overall, an excellent HTML5 platform. We were particularly impressed with the quality of its SVG, Canvas and CSS3 Animation implementations. In this review, we’ll mostly concentrate on what’s new and improved.

“In our original BlackBerry PlayBook HTML5 scorecard, we noted that it was far superior to the Android 3 browser and overall, an excellent HTML5 platform.”

Our HTML5 scorecard consists of a series of tests aimed to help mobile web developers understand new devices and new form factors as they come to market. We test in an number of areas, namely JavaScript performance, HTML5/CSS3 features, rendering performance and rendering accuracy. We also use a variety of homegrown and third party test-sites, including Modernizr, Acid3, and our own Sencha Animator demos and Sencha Touch Kitchen Sink.

Device Essentials

But first up, some essentials for the web developer. If you’re looking for traffic from the PlayBook OS 2, search for the following user agent string:

Mozilla/5.0 (PlayBook; U; RIM tablet  OS 2.0.0; en-US) Apple/Webkit/535.1+ (KHTML, like Gecko) Version/7.2.0.0 Safari/535.1)

The PlayBook OS 2 supports up to 4 simultaneous touches, so interactions that rely on two simultaneous pinch/zooms are possible.

Next, JavaScript timer resolution. We’ve been looking at timer resolution on mobile lately and it can vary widely by device. For example, iOS 5.1 currently has a 4ms timer resolution with high consistency, Android 4 has a 10ms timer with low consistency. In contrast, the PlayBook 2.0 appears to have a 17ms timer. This means that script animations paced by a setTimeout() loop will run about 4x slower on the PlayBook 2 by default; a good reason to use explicit time in your web animations whether via JavaScript or time-based CSS3 animation. The PlayBook 2 browser doesn’t yet support the relatively new requestAnimationFrame API. For developers looking to use requestAnimationFrame cross-browser, we suggest that you use a polyfill to get the advantages of requestAnimationFrame when you can.

Acid3 and Feature Detection

Just like the original PlayBook, the PlayBook OS 2 has a perfect Acid 3 score, with no rendering artifacts. Our favorite modernizr check sites, haz.io and HTML5Test report a very complete set of HTML5 features, including 3D transforms, HTML5 audio and video, web sockets, workers, web intents, SMIL, SVG and WebGL. What’s particularly nice to see is an almost complete implementation of HTML5 input types such as color picker and time.

Some minor missing features from the modernizr feature check: File API support, background-repeat, and IndexedDB. Since the only implementation of IndexedDB on major mobile platforms is the beta of Chrome for Android, this is not a very surprising omission (and WebSQL is still available anyway).

However, as we’ve noted before, just because a feature is detected, it doesn’t mean it’s working. WebGL, for example, won’t execute in a normal browser page on the PlayBook OS 2, and only activates when used in a WebWorks hybrid application. Similarly, some of the HTML5 input elements exist but you probably wouldn’t use them in their default style. For example, the time input has the unsettling habit of rewinding back to 0 when you spin past the highest value rather than looping. The color picker, while functional, is probably too spartan for use in a consumer application.

Graphics Performance

In real world tests, Canvas and SVG performance was excellent, even on stressful demos like Canvas color cycle and the classic SVG floating balloon. CSS Animation performance was equally excellent. The only graphics effect we could see missing was robust support for image slicing in border-image. But no WebKit browser supports this feature properly yet, with the exception of recent desktop Chromes. We’re happy to report that the PlayBook 2 also has an excellent implementation of advanced SVG filters–morphology, diffuse lighting, specular lighting, custom composition filters–they’re all here. As with desktop browsers, it’s not possible yet to animate filters at an acceptable FPS, but even having static filters of this sophistication is an amazing advance for web developers everywhere. Instagram-like image effects are now available for anyone with the two to three days it takes to learn the physics and syntax of SVG filters.

Here is a screenshot from the PlayBook 2.0 of a morphology filter (from IE10’s SVG Filter demo page.)

The code for this is simple:

<filter id="demo">
     <feMorphology operator="dilate" radius ="4" />
 <filter/>

Just like in the original PlayBook, Sencha Animator CSS3 Animation demos work very well, handling multiple simultaneous animations smoothly and consistently.

We’re also happy to say that the PlayBook OS 2 has a rock solid implementation of position: fixed. Even with the fastest scrolling, we were unable to dislodge fixed content from its place on screen. overflow: scroll and overflow: auto also work smoothly (with one fingered scrolling vs. iOS’s two fingered scroll).

Removal of Non-Standards Track Features

A last note–in a move that’s guaranteed to make anti-prefixers happy, the PlayBook OS 2 browser has removed support for -webkit-mask. CSS masks are very handy but have been hanging out as a WebKit only feature for nigh on four years. Although there is a new standards draft for filters and effects that aims to regularize this feature, since other engines do not appear to be on track to support the feature (Gecko wants you to use SVG masks instead), it’s probably a good idea to remove any critical dependencies on masks if you want your app to work cross platform in the future.

A Very Fine HTML5 Browser

With the release of BlackBerry PlayBook OS 2, the RIM browser team once again delivers a high performance and up-to-date HTML5 platform for web app developers. For businesses that want to bet on a stable, state of the art device for HTML5 applications, the BlackBerry PlayBook with OS 2 is an excellent choice.

It is with pleasure that we announce today the general availability of Ext JS 4.1. This release represents a significant step forward for the performance of Ext JS 4, including several new features and numerous other improvements. With the three betas and the three RCs, we’re also extremely thankful to the community members who have helped us with bug reports, forum posts, emails, tweets, and field testing on production applications to make this a huge step forward for Ext JS!

Download Ext JS 4.1 Ext JS 4.1 Upgrade Guide

Performance

Grid

Layouts

Most of the work on layouts has been to make them faster by avoiding browser reflows. In the process, however, most layouts benefited from the refactor in other ways. Most notably, the “border” layout’s new features have been covered previously. In addition, the width shrink-wrapping that used to be handled by specialized components (e.g., tooltip or menu) is now properly handled by the core layouts. Not only did this change make those use-cases much more efficient (by avoiding repeated layouts), but now this functionality is more generally available in your applications.

Core

There have also been significant improvements in XTemplates and overrides. Much of this has been covered before; however, Ext.override has also gained a new bit of useful functionality: it can now override instance methods (e.g., on a singleton), allowing the overridden methods to be called using the standard callParent method.

Another handy addition to event listeners is that the use of method names (rather than function references) is now supported. For example:

listeners: {
    click: 'onClick',
    change: 'onChange',
    scope: someObject
}

In previous versions, the above would have looked like this (which is, of course, still valid):

listeners: {
    click: someObject.onClick,
    change: someObject.onChange,
    scope: someObject
}

The use of method names gives better diagnostic messages in development mode for missing methods.

Tooling

We’re also excited to release alongside Ext JS 4.1 the new release of the SDK Tools, Beta 3. The new version of the SDK Tools is required to generate images for custom themes using Ext JS 4.1. This same version of the SDK Tools is also compatible with the latest release of Sencha Touch 2.

Included in the example folder of the Ext JS 4.1 download is a web page-based tool called the Page Analyzer. This has been covered as well, but its use is highly recommended to get the best performance out of Ext JS 4.1. It is also invaluable for diagnosing layout problems.

Docs and Guides

Of course, the documentation center has been updated to use Ext JS 4.1! In addition, there is new content important for moving to the new release. There is a new Optimization Guide based on the related blog post and webinar. Reference it for the latest advice on tuning your applications for best performance. There is also an Upgrade Guide covering the API changes that will likely impact your move to Ext JS 4.1.

Conclusion

Ext JS 4.1 brings significant improvement to your applications, and we are investing heavily in exceeding our customer's usability and performance expectations.

We want to take this moment to reiterate our commitment to our customers on various versions of Ext JS. We blogged about extending support of Ext JS 3 for 12 months beyond the next major release after Ext JS 4, and support subscribers will continue to receive patch updates for Ext JS 3.4.x, including support for IE 10.

We are very excited about Ext JS 4.1 and are looking forward to your feedback. Go to the forum and let us and the rest of the community know about your experience with Ext JS 4.1!

Download Ext JS 4.1 Ext JS 4.1 Upgrade Guide

When we started working on the next release of Ext Designer, we had very ambitious goals: we wanted to build a great visual tool to help you build web applications faster that didn’t get in the way. We wanted to make the development process more inclusive by lowering the barrier to collaborate, allowing UX designers to work effectively in the same environment that you use.

We wanted you to be able to create complete applications – not just the UI. We wanted a tool that would let you build an application quickly out of standard components, but also allow you to easily customize those components with your own code, right from within the tool.

What we created is no longer just a rapid interface designer, but a complete application builder, a place where the architecture and the interface of an application can be created and properly structured for development.

For this reason, the name “Designer” no longer accurately captured what the product enabled: it’s now much, much more than a simple UI designer. And so, it is our pleasure to introduce the all-new Sencha Architect 2.

Sencha Architect 2: What’s Changed, What’s New

A tool that works the way you do.

The foundational concept behind Architect 2 is simple: a visual app building tool that creates code as clean and well structured as the code that a Lead Architect at Sencha would write by hand. Architect 2 is visual where it makes sense, but also gets out of your way when you need to dive into code.

This philosophy led to the creation of a tool that lets you iterate solutions with very low overhead and with instant visual feedback; all assisted by inline documentation and quick links to the API reference.

But the best part is that it’s a tool where experimentation is safe. All code generated by Architect is guaranteed to work out of the box. You can’t arrange components in a way that will break the frameworks’ conventions. There’s also a wealth of new features that makes the experience of creating apps a lot more enjoyable and immediate.

The hub of all activity: the Project Inspector

The Project Inspector has been greatly enhanced to show views, controllers, models, and stores all in one place, along with information about the project’s structure. All components and their relationships are right there, where you can see and analyze them.

Framework Support & Creation Tools

Architect can create applications for Ext JS 4 and Sencha Touch 2. The Toolbox has been improved dramatically to make the richness of both frameworks more accessible. Categories now make searching for a component quicker, and it’s possible to create new groups of components for your personal workflow.

Architect also includes a built-in JavaScript editor, so you can work on your code without switching back and forth between different tools, although it’s still easy to switch between Architect and your favorite IDE.

In-line Documentation

Now every component, property and configuration comes with handy inline documentation, and if you need more, there are quick links to go deep into the API reference. The documentation is available as a part of the main UI, and appears as tool-tips and hovers as you need it.

Source Control-Friendly File Format

Architect 2 projects are easier to manage and track via source control. The single file archive we had in Ext Designer 1 has been replaced by a file for each view, model, and store. This decision was intended to make it easier to work on a project where more than a single developer is involved.

Native Mobile Packaging & iOS Simulation

You can now package applications for iOS and Android directly from Architect 2. Using technology we released with Sencha Touch 2, Architect lets you take a finished application and get it ready for deployment on a mobile device quickly and easily. And if you’re on OS X and you have Xcode 4 installed, Architect starts the iOS simulator for you and loads your application automatically.

A Better UX to Make Development Fun

Several weeks ago, we asked for volunteers to help user-test our beta version. Thanks to their help and our extensive set of usability studies, we were able to zero in on the biggest user experience issues and to design better solutions for commonly performed tasks.

Here are just a few of the user experience improvements we made. We added a highlight for new components that are added to the Project Inspector: this helps you see where the component is added in the hierarchy. We added a toggle to the property panel that lets you switch between commonly used configurations vs. the comprehensive set. We also enhanced our component icons to improve readability. These were just a few of a long list of detail improvements.

Countless hours went into making Architect 2 a beautiful and easy to use application. User experience is never complete but we know you will notice right away how our new process has made the tool as easy to use as it is powerful.

We couldn’t have done it without you…

On top of our formal user studies, we want to say thank you to our community for helping and guiding us with their constant feedback: first with the private beta program for SenchaCon 2011 attendees (it rocked to meet you in person in Austin!) to the later open beta. Your suggestions and questions helped make Architect 2 what it is today.

We also want to thank you for your patience and your incredibly insightful comments, and we ask you to keep it up: Architect 2 will be evolving over the course of 2012 and we need your continued support and feedback to make all the things we have dreamed during the last months a reality.

Keep asking for new features, keep reporting bugs, keep showing us your examples.

Getting Started with Sencha Architect 2

This version of Architect ships with a significant number of examples for Ext JS 4 and Sencha Touch 2 alike. We have re-created a few of the frameworks’ demos in Architect 2 including GeoCongress and the Feed Reader, and it’s all available from Architect’s product page (close to the bottom). Just unzip it and open the .xda files to see great examples of entire applications.

The online documentation is also a significant step forward. All our technical docs are now hosted online, just like the API docs, which makes them easier to search and easier to keep updated. While the docs are already much better, we are committed to improve them and expand them significantly over time. Please let us know where you find the current documentation lacking or unclear, and we will concentrate our efforts where it’s most useful.

We also want to let you know that, if you have an example you are particularly proud of, and you want to share it with the community, submit it to the dev team for inclusion with the set that comes with Architect 2: if we like it, we’ll add it to the downloadable package and of course give you credit in the notes. It’s your chance to shine, don’t miss out on it!

Pricing & Availability

Individual copies of Sencha Architect 2 cost $399, with discounts for 5 and 20 packs. If you are upgrading from an old copy of Ext Designer 1, please read the following carefully:

• If you bought Ext Designer 1.0 after January 1st, 2012, you’re already entitled to Sencha Architect 2! Your license will be sent shortly to your email address, but in case it doesn’t after a few days for any reason (typos, spam filters, etc) please contact designer.upgrade@sencha.com and we will take care of everything for you.
• If you purchased an Ext Designer 1.x license prior to January 1st, 2012, you can upgrade to Architect 2 for $279 in our online store.

Please note that Sencha Complete includes Architect 2, and remains priced at $995. So, go ahead, buy Sencha Architect 2 from the Sencha Store, or download the trial and share your experiences with us!

An alternative approach is to build a web app where the UI is generated in the browser and connects to one of the SharePoint APIs to access data stored in SharePoint. SharePoint 2010 offers three data APIs which can be used in web apps:

• SP Web Services (SOAP)
• REST (ListData.svc)
• CSOM (Client Side Object Model)

Although each of the APIs offer a distinct set of capabilities, the REST interface is simple and lightweight and I prefer this for mobile use. The SharePoint REST interface offers full CRUD access to items in SharePoint lists and libraries, which might be all that you need for your mobile web app.

Getting Started

Because of the Same Origin Policy, your html file must be served from the same domain as the SharePoint site you want to access. You can place your html file containing your app on the server file system or in a SharePoint document library (e.g. site assets).

If you are using SharePoint Online (Office365), you will notice that when you select a .html file in a doc library, it is presented as a download, not opened in the browser. This is due to SharePoint settings which you are not allowed to change in SharePoint Online. As a workaround, simply use an .aspx file extension, instead of .html. This way, you can start your single page SharePoint application from a file in an asset library.

So, to get going, you need to create an app.aspx file to include all the CSS and JavaScript for your Sencha Touch app.

<!DOCTYPE html>
<html>
    <head>
    <title>SharePoint web app example</title>
       <link rel="stylesheet" href="sencha-touch.css" type="text/css" />
       <link rel="stylesheet" href="app.css" type="text/css" />
       <script src="sencha-touch.js"></script>
       <script src="app.js"></script>
    </head>
    <body>
    </body>
</html>

The app.js file contains the basic Sencha Touch start-up and shows an alert:

new Ext.Application({
  launch: function () {
    Ext.Msg.alert('Hello world', 'Ready for action!')
  }
});

You can put these files in any SP doc library. Let’s assume you have put this file in the Site Assets library of a SP site called demo:

Now you can open up the following url on your iPhone or Android device:

http://[[SPserver]]/demo/siteassets/app.aspx

After logon, you will see the following result:

Not quite what we expected… SharePoint has detected that we accessed the page with a mobile device and responds with the default mobile UI. You can suppress the default mobile UI by appending ?mobile=0 to the url.

So, let’s try: http://[[SPserver]]/demo/siteassets/app.aspx?mobile=0

Yes! We now have a Sencha Touch web app running off a SharePoint server.

OData proxy

The next step is to connect Sencha Touch models and stores to SharePoint items and lists through the REST interface using the OData protocol. For this, you will need an OData proxy. I developed an OData proxy as an Ext user extension. It is designed to access SharePoint data using the SharePoint ListData.svc REST service which is based on OData. You may use it for other OData sources.

You can find the OData SharePoint proxy for Sencha Touch on GitHub.

Ext.ux.ODataProxy features:

• create, read, update and delete SharePoint items as Sencha Touch models
• fetch multiple items from a SharePoint list in a Sencha Touch store
• JSON payloads
• partial updates: only changed attributes are sent to the server during an update
• fixes issues in Sencha Touch data Model implementation (e.g. missing destroy() method)

Let’s look at some examples of how you can use the SharePoint proxy. In these examples, we will assume you have a subsite ‘/teamsite’ in which you have created a Contacts list based on the standard Contacts list template.

First, we need to define the Model.

var Contact = Ext.regModel('Contact', {
  fields: [
      // please note CamelCase convention for SharePoint column names
      { name: 'Id', type: 'int' },
      'LastName',
      'FirstName'
    ],
 
  idProperty: 'Id',
 
  proxy: {
    // use the special odata proxy defined in odataproxy.js
    type: 'odata',
 
    // the proxy will connect to the List
    // named 'Contacts' in the /teamsite subsite
    url: '/teamsite/_vti_bin/ListData.svc/Contacts'
  }
});

We can now use the following CRUD operations on the Contact data model:

 // Create an instance
 var contact = new Contact({ LastName: 'Johnson', FirstName: 'Al' })
 contact.save();
 …
 
 // Read an instance from the server by id
 var id = 200;
 Contact.load(id);
 …
 
 // Update an instance, loaded from the server
 Contact.load(id, {
     success: function (contact) {
         contact.set("LastName", "Maxwell");
         contact.save();
     }
 });
 …
 
 // Delete an instance
 Contact.load(id, {
     success: function (contact) {
         contact.destroy()
     }
 });
 …

Using the Contact model, you can now easily define a Store to fetch multiple items:

var store = new Ext.data.Store({
    model: 'Contact'
});
store.load()

Build Your Application

Using the odata proxy to configure your Models and Stores that connect to the SharePoint server, you can develop your app further just like any other Sencha Touch app. Check out the tutorials on Sencha.com for more info.

I will conclude with an example of a contact list through the normal SharePoint UI and through a Sencha Touch app:

Just as easily, you can expose the content of document libraries:

Live Demo

A live demo is available at http://oxida.sharepoint.com/demo. You can open the mobile web app and also explore the content of the SharePoint site with a desktop browser.

Sencha Touch and SharePoint are a great combination and open up exciting new opportunities for companies using SharePoint. Give it a try!

360|Flex

April 15-18, Denver, CO
360|Flex has quickly become THE conference for Flex/AIR/ActionScript developers to attend to connect with the community, learn from the Adobe Engineers, as well as community experts, and get the deepest, most technical understanding of Flex and what’s coming for Flex, anywhere.

Learn more about 360|Flex

Devoxx

April 18-20, Paris, France
Devoxx France is a conference for Developers organized by the Paris JUG team in Paris, France. With 25% talks in English and 75% talks in French, we will however propose top quality speakers for English speaking attendees. The conference takes place in central Paris, from the 18th to the 20th of April 2012, in the Marriott Hotel “Paris Rive gauche”

Learn more about Devoxx

FITC Toronto

April 23-25, Toronto, Canada
The game has changed and FITC is on it! Featuring over 70 renowned digital creators from around the globe, FITC Toronto 2012 attendees will be privy to the knowledge of the best and brightest in the digital space. Covering everything from HTML5 to making digital art, this three day festival will leave attendees inspired to create in new and innovative ways. There will also be plenty of opportunities for networking at the legendary FITC parties and through chance encounters during the day – meet your next boss, business partner or employee.

Learn more about FITC Toronto

DevCon5

April 25, Santa Clara, CA
DevCon5 provides you with the information and tools you need to exploit the capabilities of revolutionary HTML5 technology. Learn from Adobe, Microsoft, and other top names, while networking with your colleagues and community. Spend two days immersed in HTML5 topics, including; user experience design and security, building new business models for the Mobile Web, browser compatibility with HTML5 and more. Sessions are hands on and demonstrate how to write code that makes the user’s screen come alive.

Prepare for the evolution to HTML5 NOW. Join fellow web developers, designers, and architects, as well as technology leaders and business strategists who will gather in California to learn strategies and tactics to implement and execute HTML5. DevCon5 is an HTML5 Designer’s and Developer’s Conference that assembles some of the premier thinkers and speakers on this new revolutionary technology.

Learn more about DevCon5

Adobe Camp Brazil

April 27-28, Maceió, Alagoas, Brazil

Adobe Camp Brazil 2012 will offer tracks in Development, Design and Digital Video. Held for the third time, the 2012 camp brings together some of the best professionals in the world to present and discuss the latest trends and innovations in the creative and technical space. As a pioneering event in the Brazil, we are inviting professionals and students from all over the world to learn from the best minds in the market. With full support and supervision from Adobe Systems USA, speakers at Adobe Camp Brazil include Adobe employees, creative directors, movie directors, designers, photographers, video makers, CTOs, and CEOs from Brazil, Europe and the United States. The event was considered the best Adobe Camp ever, and organizers are extremely excited to offer this event again in Brazil.

Learn more about Adobe Camp Brazil

Joint Webinar with Macadamian

May 2
Learn how Sencha Touch 2 helped Macadamian build their first version of ARIA, an oncology information system for Varian to run on an iPad.

Join Dan Menard, Software Developer at Macadamian, Erwin Nell, Director of User Experience at Varian and Aditya Bansod, Senior Director of Product Management at Sencha as they discuss why they picked Sencha Touch and the implementation process. The group will discuss why Sencha Touch was the right choice, how to extend Sencha Touch to support the vast needs of a complex electronic medical record system, and how Sencha Touch 2 makes large-scale projects more manageable.

Learn more about this webinar

Source DevCon

May 2-5, 2012, London, UK
Join Platinum Sponsors, Sencha, in the magnificent London for 2012 SourceDevCon mobile and desktop web application conference. Built on the last year’s success story in Split, Croatia, Sourc{ will deliver three days of ultimate informational, educational, and fun experience in the beautiful Park Plaza Riverbank Hotel.

As a Sencha community member, you’ll save 25% off the full conference rate of £799 by using the coupon code sencha, that’s a savings of more than £200 ($300). Conference attendees can also take advantage of special lodging rates at the venue, so get your tickets now!

Learn more about Source DevCon

WebDU

May 3-4, Sydney, Australia
WebDU is the premier Asia Pacific Web Technology Conference taking place 3-4 May 2012 at Four Points Sheraton, Sydney Australia. This will be the tenth year the conference is being held and each year it has grown to be bigger and better, and its thanks to all our sponsors! There are three tiers of sponsorship available; Gold, Silver and Bronze. In addition, there are a variety of miscellaneous sponsorship opportunities to consider.

Learn more about WebDU

O’Reilly Fluent – JavaScript and Beyond

May 29-31, San Francisco
The O’Reilly Fluent Conference is about everything JavaScript. If you’re developing for the Web, desktop, or mobile, knowing the ins and outs of JavaScript and related technologies is critical. Come to Fluent to learn from expert developers who are using JavaScript in all kinds of contexts, to do things that no one ever expected JavaScript could do, and do so well.

Learn more about O’Reilly Fluent

Dutch Mobile Conference

June 7-9, Amsterdam, Netherlands
We are proud to announce the first edition of the Dutch Mobile Conference. A 3-day conference about technologies used for mobile websites and mobile web application development focussed on developers. The first day wil be packed with in-depth tutorials. On the other 2 days talks will be given on various subjects regarding mobile web development. Our aim is to deliver an awesome quality conference to inspire, inform and teach our visitors.

Learn more about the Dutch Mobile Conference

Microsoft TechEd North America

June 11-14, Orlando, FL
Celebrate 20 years of Microsoft TechEd North America! TechEd is Microsoft’s premier technology conference for IT professionals and developers, offering the most comprehensive technical education across Microsoft’s current and soon-to-be-released suite of products, solutions, tools, and services. Our four day event in Orlando, Florida offers hands-on learning, deep product exploration and countless opportunities to connect with a community of industry and Microsoft experts.

Learn more about Microsoft TechEd North America

QCon New York

June 18-20, New York, NY
QCon is a practitioner-driven conference designed for team leads, architects, and project management. The program includes two tutorial days led by over 80 industry experts and authors, and three days with 18 tracks and over 80 speakers covering a wide variety of relevant and exciting topics in software development today.

Learn more about QCon New York

The data is saved and retrieved as a map from string keys to string values. State data is serialized to strings and deserialized to objects via the bean-like interfaces of GWT AutoBeans. This data is retrieved asynchronously, and this allows for asynchronous providers such as those that communicate via RPC.

Differences with Ext GWT 2.0

With 2.0, Components work directly with the StateManager, restoring and saving state directly as part of the Component lifecycle. With 3.0, this functionality was moved out of Component and is now managed via state handlers (AbstractStateHandler). 3.0 Component has two state related methods:

• setStateful(boolean stateful) - specifies if state should be enabled
• setStateId(String stateId) - provides a unique id in which state data is keyed

StateManager & Providers

The StateManager is a singleton that delegates the action of saving and retrieving data to its Provider. Ext GWT ships with two concrete Provider implementations and an abstract base on which to build your own:

• CookieProvider
• HtmlStorageProvider
• AbstractRpcProvider

Window State Example

Example URL: http://staging.sencha.com:8080/examples-dev/#ExamplePlace:windowstate

This article demonstrates how to use the State API. We’ll create a new example that uses the State API to maintain state. In this example, Window components will remember their last size and position when closed. If a user returns to the example and opens a window, that window will be initialized to its previous size and position.

You can test the code by opening a window. Close the window after moving and resizing it. Then, refresh the browser and open the same window again. The size and position should match the window when it was last closed.

Define Data Structure & AutoBeanFactory

First, we’ll define the data we want to persist using these interfaces:

public interface ExampleAutoBeanFactory extends DefaultStateAutoBeanFactory {

  AutoBean<WindowsState> windowsState();

  AutoBean<WindowState> windowState();

}

public static interface WindowState {

  int getHeight();

  int getWidth();

  int getX();

  int getY();

  void setHeight(int height);

  void setWidth(int width);

  void setX(int x);

  void setY(int y);

}

The data will be a list of WindowState instances stored in a map. This map will be keyed by state ID. The state ID is a unique key given to each window in the example using the setStateId method defined in Component.

Next, we define our AutoBean factory. Note that we subclass DefaultStateAutoBeanFactory. This is necessary to take advantage of the Ext GWT State code.

public interface ExampleAutoBeanFactory extends DefaultStateAutoBeanFactory {

  AutoBean<WindowsState> windowsState();

  AutoBean<WindowState> windowState();

}

Now that we’ve defined our data and factory, we need to tell the StateManger code to use our AutoBean factory and not the Ext GWT default. We do this by setting the appropriate configuration property in our module XML file:

<set-configuration-property name="GXT.state.autoBeanFactory" value="com.sencha.gxt.explorer.client.misc.WindowStateExample.ExampleAutoBeanFactory" />

State Handler

Next, we create the class that will load and save our state information. This is done by subclassing AbstractStateHandler.

public class StateExampleHandler extends AbstractStateHandler<WindowsState, WindowStateExample> {

  public StateExampleHandler(WindowStateExample example, String key) {
    super(WindowsState.class, example, key);
  }

  @Override
  public void applyState() {
    Map<String, WindowState> windows = getState().getWindowState();
    if (windows == null) {
      windows = new HashMap<String, WindowState>();
      getState().setWindowState(windows);
    }
  }

}

AbstractStateHandler has two type parameters. The first represents the AutoBean state type (WindowState). The second represents the target object that will use this state information (WindowStateExample).

When we instantiate the handler, we pass the target object and a key to identify the saved and retrieved state.

In the applyState method, we simply ensure that we have our state map instantiated. We will retrieve the actual state and use it in other code.

State handlers supports 4 event types: BeforeRestoreState, RestoreState, BeforeSaveState and SaveState.

Opening a Window

Before a window is opened, we check to see if that window has any state information. If it does, we initialize the window before it is shown.

private void onBeforeShowWindow(Window window) {
  if (stateHandler.getState() != null && stateHandler.getState().getWindowState() != null) {
    String stateId = window.getStateId();
    WindowState state = stateHandler.getState().getWindowState().get(stateId);
    if (state != null) {
      window.setPixelSize(state.getWidth(), state.getHeight());
      window.setPagePosition(state.getX(), state.getY());
    }
  }
}

Hiding a Window

private void onBeforeHideWindow(Window window) {
  String stateId = window.getStateId();

  WindowsState state = stateHandler.getState();
  Map<String, WindowState> windows = state.getWindowState();
  WindowState windowState = windows.get(stateId);
  if (windowState == null) {
    windowState = factory.windowState().as();
    windows.put(stateId, windowState);
  }

  Rectangle rect = window.getElement().getBounds();

  windowState.setHeight(rect.getHeight());
  windowState.setWidth(rect.getWidth());
  windowState.setX(rect.getX());
  windowState.setY(rect.getY());

  stateHandler.saveState();
}

Summary

In this article, we introduced the Ext GWT 3.0 State API by working through an example. The example is running here, and you can view the source code of the example by clicking the Source tab below the example. One note, the example and event support was recently added to the state handlers and is not in the last public release (beta 2).

This particular example uses a cookie provider to persist the state data. You use use a developer tool such as Firebug to inspect the request to see the cookies that are being set by the example. The provider can be easily changed to use a different persistence strategy such as a server side RPC provider or an HTML5 local storage provider.

The Release Candidate stage is all about polish, whether it’s on the framework, the examples or other sections like the documentation. Much of the work we have done since RC1 has been driven by the feedback we’ve received from the community; we’re always grateful for your bug reports and suggestions on the forums and we’re working hard to make the framework deliver based on your feedback.

Today we’d like to ask you to download RC2 and test it against your apps. If you haven’t used a 4.1 release yet we hope you’ll be pleasantly surprised by the performance improvements over 4.0.x, and if you have then we hope the additional polish since RC1 will make your apps feel and behave even better.

As we close in on a 4.1 GA release your feedback is more important than ever so we hope you’ll take a little time to test RC2 with your apps and let us know how it feels. We’ve prepared a full set of release notes and known issues for RC2, and we’ve put the latest examples online too.

Let us know what you think in the comments and the forums!

Download Ext JS 4.1 RC 2   Download Ext JS 4.1 RC 3

Release Notes for Ext JS 4.1.0 RC 2

Release Date: March 30, 2012
Version Number: 4.1.0 RC 2

Bugs Fixed

• Animation (1)
  • EXTJSIV-5523 Animation Incorrectly Positions Windows
• Button (3)
  • EXTJSIV-5429 Button with an icon can not be properly resized.
  • EXTJSIV-5432 Button icons are clipped at times (varying between browsers)
  • EXTJSIV-5600 Feed Viewer- Button names are left aligned in Add feed popup
• Charts (20)
  • EXTJSIV-3617 Rendering issue with stacked column chart without animation
  • EXTJSIV-3783 Area Chart - Farthest right tick not firing mouse events, showing tooltip, etc.
  • EXTJSIV-4459  If you try to render a chart in internet explorer 8 and you have animate=true, the markers will render, but lines themselves will never render
  • EXTJSIV-4544 Charts : Rich Tips - No tool tips are displayed upon mouse hovering on graph nodes for the second time.
  • EXTJSIV-4730 Combination Examples - Ext JS 3&4 on one page : Issue reloading legends inside Charts
  • EXTJSIV-4779 Bar Chart does not render correctly when all yField data points are equal
  • EXTJSIV-5007 Save button in chart examples should display popup panel to confirm save and then save image.
  • EXTJSIV-5024 Charts: Themed Line Charts: Wrong information shown on mouse hover in simple styling chart
  • EXTJSIV-5360 Stacked column with two series values incorrect
  • EXTJSIV-5462 Custom Pie Charts: Browser is forcibly closed when clicked multiple times on Reload Data button
  • EXTJSIV-5474 Chart - left axis not showing the max value
  • EXTJSIV-5499 Set width of column charts not working correctly
  • EXTJSIV-5571 Chart problems with decimals on bottom axis
  • EXTJSIV-5575 Grouped Bar charts: Incorrect values shown in series labels
  • EXTJSIV-5580 Charts : Area Charts: Chart “Legends ” are not displaying properly in the downloaded files.
  • EXTJSIV-5623 Column charts displays wrong values/tips when disabling series
  • EXTJSIV-5633 Charts - Filled Radar charts - Chart is not displaying in Filled Radar chart example
  • EXTJSIV-5655 Charts- Column Custom Back ground - Save Chart button is not working.
  • EXTJSIV-5670 Charts - Stacked Bar Charts - Chart is not displaying upon hiding and unhiding the legends in the chart.
  • EXTJSIV-5706 Line series offset one sample to the left
• Coding Style (1)
  • EXTJSIV-5682 Remove extra comma in Ext.view.TableChunker
• Core (11)
  • EXTJSIV-4966 Global var in Renderable
  • EXTJSIV-5000 Problems with DOM Id containing colon and DomeQuery.jsSelect with CSS escape notation
  • EXTJSIV-5350 ItemSelector returns [undefined] when empty
  • EXTJSIV-5444 onReady Firing Twice
  • EXTJSIV-5460 FF 3.6’s Number.toJSON violates standards. We must programatically encode Numbers.
  • EXTJSIV-5538 Themes examples has large memory leak when switching themes in IE
  • EXTJSIV-5552 Thousand separator and decimal separator are wrong for Chinese languages
  • EXTJSIV-5630 Observable broken for class observation
  • EXTJSIV-5641 CompositeElementLite: filter method is broken
  • EXTJSIV-5705 Document Element Mistakenly Garbage Collected
  • EXTJSIV-5765 Error when loading Ext later than initial page load
• Data (4)
  • EXTJSIV-5224 Store.removeAll does not remove any prefetched data
  • EXTJSIV-5415 Store load not triggered when opening ListMenu in FilterFeature
  • EXTJSIV-5508 Issue with Ext.data.reader.Reader onMetaChange listener and idProperty
  • EXTJSIV-5585 Sorters are not applied after using FilterBy() method
• DataView (2)
  • EXTJSIV-4854 LoadMask does not manage its z-index correctly WRT its client Component’s z-index.
  • EXTJSIV-5667 Nested data is unavailable to templates in DataView
• Documentation (4)
  • EXTJSIV-5069 Ext.grid.feature.Grouping docs need to be clearer
  • EXTJSIV-5553 Miscellaneous: History - Page is redirecting to Home page when click on “History” Example
  • EXTJSIV-5584 Ext.Array.toArray end parameter incorrectly documented
  • EXTJSIV-5745 Grid Grouping collapse() is private, when it should be public
• Draw (2)
  • EXTJSIV-2097 viewbox: true ignores padding
  • EXTJSIV-5078 Missing scale/scaling support in Ext.fx.target.Sprite.setAttr
• Events (2)
  • EXTJSIV-5194 Card layout does not fire activate on initial view
  • EXTJSIV-5271 ComponentQuery “is” method fails if selector contains a comma
• Examples (9)
  • EXTJSIV-1146 Editor Grid Example: Clicking from Common Name in an editor to Light doesn’t invoke an editor
  • EXTJSIV-4136 Portal demo :Unable to close the portlets in a specific scenario.
  • EXTJSIV-4533 Combination Examples : Kitchen Sink : Tabs : Titled Tab Panels: Not displaying complete text in Ext.tab.Panel with frame:true Panel
  • EXTJSIV-5529 Combination Examples : Image Viewer : Tool tip is stretched while trying to drag more than one image
  • EXTJSIV-5614 Combination Examples : Theme viewer : By default Slider values are displaying behind the resizable handles.
  • EXTJSIV-5617 Combination Examples : Image Viewer: By default Albums should display with expand and collapse (“+”, “-“) buttons when user drag and drop the files in to the albums.
  • EXTJSIV-5650 Example - Nested Loading shows a blank page
  • EXTJSIV-5666 PageAnalyzer hangs when loading pages (busy-spin)
  • EXTJSIV-5769 Combinatiion Examples - Ext JS Calender Sample- “Delete Button ” is Missing on Edit Event dialog
• Forms (15)
  • EXTJSIV-4911 Resizers on TextFields do not always work properly
  • EXTJSIV-4940 Ext.form.TimeField class contained typeAhead, later releases the Ext.form.field.Time class this functionality is missing
  • EXTJSIV-5433 ChekboxGroup with all fixed width columns does not width the columns correctly.
  • EXTJSIV-5439 Hover icon changes to select when combo editor is disabled.
  • EXTJSIV-5530 Forms- Dynamic forms- Field headers and borders are not displaying properly.
  • EXTJSIV-5557 trackResetOnLoad has no affect on radiogroup after loadrecord()
  • EXTJSIV-5567 allowBlank not part of the default labelableRenderProps
  • EXTJSIV-5570 HtmlEditor: Tab and Enter presses aren’t being correctly handled in readOnly state
  • EXTJSIV-5578 Forms File Upload Field Button names are truncated in IE 7
  • EXTJSIV-5618 Forms Custom Form Field: Search text is not deleting upon clicking on cross button(X)
  • EXTJSIV-5634 Forms - Shopping Chart Checkout- Text boxes and label captions are disappearing after uncheck and check Same as Mailing Address checkbox
  • EXTJSIV-5643 Forms : Checkbox/ Radio Groups : Contents under the Radio groups are not aligned properly.
  • EXTJSIV-5651 Checkbox Focus Class Malformed
  • EXTJSIV-5703 Selected form component/editor loses focus if grid in edit mode
  • EXTJSIV-5712 Forms Checkout Form Text alignment is disturbed for payment radio buttons
• Grid (31)
  • EXTJSIV-1679 Extra padding seen in grid for IE 6 & 7 versus all other browsers
  • EXTJSIV-3766 Not possible to set ‘cursor’ attribute on a Column chart series
  • EXTJSIV-3998 Vertical scrollbar doesn’t appear when it should when using Row Expander plugin
  • EXTJSIV-4189 Field used as an editor in a Grid will fire change event when the field’s value is initially set
  • EXTJSIV-4371 Grid Plugin Example: Bug in RowWrap. Hidden columns are not being hidden in data.
  • EXTJSIV-4564 Lockable grid does not register features
  • EXTJSIV-5003 Cell editor does not always work correctly with locked grid
  • EXTJSIV-5151 Unwanted sortchange and resize events on gridcolumns
  • EXTJSIV-5169 hide/show causes error when using a table layout
  • EXTJSIV-5251 Can’t theme height of grid rows
  • EXTJSIV-5303 Remote filtering doesn’t work quite right with infinite scrolling.
  • EXTJSIV-5313 injectCheckbox:false prevents check rendering in data rows
  • EXTJSIV-5323 grid.RowEditing plugin: error tooltip’s arrow is misplaced on 1st show
  • EXTJSIV-5324 Missing grid loadMask on first load
  • EXTJSIV-5348 Error when using buffered grid + locking columns
  • EXTJSIV-5349 Can not control the style emptyText displayed in the grid. Need x-grid-empty support
  • EXTJSIV-5397 Problem setting grid column filters programmatically.
  • EXTJSIV-5398 CellEditing plugin+textfield editor doesn’t completeEdit on header click.
  • EXTJSIV-5404 Grids : RESTful Store with GridPanel and RowEditor : Not able to add rows with data to the grid in a particular scenario
  • EXTJSIV-5510 Scrollbar in a grid defined with no header overlaps the grid row
  • EXTJSIV-5531 Grids: Grid with Locking Capability -The browser session is get killed once all the unlock columns are changed as lock columns
  • EXTJSIV-5573 Using loadingHeight keeps grid at loading height, doesn’t recalculate after load complete.
  • EXTJSIV-5576 groupgrid is not showing properly in beta3
  • EXTJSIV-5581 Grid Live Search Grid : Find Previous Row [<] button is truncated
  • EXTJSIV-5586 Store remote filtering doesn’t work with infinite scrolling.
  • EXTJSIV-5598 Grid Row Editing- Displaying Js Error when click on add Employee button or double click on any row in the grid
  • EXTJSIV-5599 Grids- Infinite Scroll Grid- All the topic links are changing to visited state if single topic link is visited / clicked
  • EXTJSIV-5616 Grid- Infinite Scrolling Grid - Sort Ascending / Sort Descending is not working for Author field
  • EXTJSIV-5707 CellEditing plugin needs to be more robust in case intervening listeners delete the targeted record.
  • EXTJSIV-5717 Grids Custom Grid Filters Displaying JS error while mouse hovering on filters option from Size column header drop down
  • EXTJSIV-5739 Grids : Grid Plugins : Collapse button ‘-’ is moving to middle of the row, while the row is expanded
• Layouts (15)
  • EXTJSIV-4751 Layout issues in application upon clicking on one of the results in the grid.
  • EXTJSIV-5182 Toolbar layout is unexpected after first render
  • EXTJSIV-5270 Problem using table layout in center panel of a border layout
  • EXTJSIV-5274 Margin with fit layout and shrink wrap
  • EXTJSIV-5318 Layout Managers : Border Layout : “South Eastern” panel’s UI is disturbed when collapsed and expanded the “South” panel
  • EXTJSIV-5320 Anchor Layout on a window, the title bar is rolled up into a circular header.
  • EXTJSIV-5435 Box layout interferes with layout of shrinkwrap items
  • EXTJSIV-5455 Configured placeholder for border region not respected
  • EXTJSIV-5551 Hbox layout doesn’t recalculate height when align:stretchmax is set
  • EXTJSIV-5589 Container with vbox layout with minHeight set will not grow past minHeight when auto sized children added to this container
  • EXTJSIV-5665 Wrong priority of ‘flex’ vs fixed size in h/vbox layouts
  • EXTJSIV-5679 Hbox does not stretch vertically in a specific configuration
  • EXTJSIV-5711 Layout Browser Custom layouts. Center incorrect to the specification defined for Inner centered Panel width
  • EXTJSIV-5724 Layout Failure for Collapsed Fieldsets
  • EXTJSIV-5753 Layout Managers: Table Layout : Blank page when resizing the browser in IE Quirks
• MVC (2)
  • EXTJSIV-2311 Verify the focus on the tabs when user click on open all button
  • EXTJSIV-2312 Verify the tabs display when user click’s on open all button.
• Menu (1)
  • EXTJSIV-5689 Large menus don’t constrain to viewport
• Misc (65)
  • EXTJSIV-3782 MVC Feed Viewer - Load mask appears when switching feeds even if not viewing the feed tab
  • EXTJSIV-3943 Keyboard Feed Viewer - Highlighted color is not displaying correctly in IE 6
  • EXTJSIV-3990 Editor - Label captions are overlapping on the text fields when long label caption is entered without any space.
  • EXTJSIV-4022 Add “refresh” event to Store to match “datachanged” in v3
  • EXTJSIV-4123 Ext.Array.from() with function gives empty array
  • EXTJSIV-4125 getNode return wrong record after add new record
  • EXTJSIV-4171 User details - Drop down items are displaying at the top of the page when double-click on the Editor panel
  • EXTJSIV-4175 Button doesn’t have proper markup or styling in IE in sandbox mode
  • EXTJSIV-4288 Grid row selection is cleared after store sync.
  • EXTJSIV-4397 Drag Drop Manager doesn’t select correct drop target
  • EXTJSIV-4419 MessageBox doesn’t fire callback when top-right close button clicked
  • EXTJSIV-4426 Problem with column header grouping at level 3. Columns can not be hidden.
  • EXTJSIV-4455 App freezes when an incorrect query is passed to Ext.app.Controller.control()
  • EXTJSIV-4555 Loading the Finnish locale file will crash an application using Ext.util.Format.date
  • EXTJSIV-4594 Transform of combo does not use configured store
  • EXTJSIV-4602 Syntax errors when compiling SASS themes
  • EXTJSIV-4845 Vml Draw/Sprite images not using X/Y offset in Vml
  • EXTJSIV-4847 Ext.Loader doesn’t recognize files that are not under /app
  • EXTJSIV-4953 Localization(dynamic) : Displaying JS error upon selecting “Hebrew” from the Language selector.
  • EXTJSIV-4955 Checkboxgroups W/ More Columns Than Checkboxes Throws JS Error
  • EXTJSIV-4956 Creating A Checkbox Group /w Hidden Field Throws JS Error
  • EXTJSIV-5103 Bug with Implicit Model / Store / MixedCollection / Proxy
  • EXTJSIV-5138 Reader needs to read records even when success:false
  • EXTJSIV-5233 Combination Examples : Ext JS Calendar : Displaying JS error while upon click and hold the mouse on day event matrix.
  • EXTJSIV-5247 Border of child hidden if border of container is hidden
  • EXTJSIV-5383 Using two panels for both drag and drop fails
  • EXTJSIV-5441 Viewport with a configured height width sets the height and width on the document body causing the viewport to not fit the browser window in firefox quirks mode
  • EXTJSIV-5468 Loading indicator still visible with panel collapsed
  • EXTJSIV-5490 Possible bug when grouping by a template column in a grid
  • EXTJSIV-5497 Bug when centering components in vbox/hbox layouts
  • EXTJSIV-5506 Datepicker displays Invalid date format when chinese or japanese localization applied
  • EXTJSIV-5513 Miscellaneous : Editor : Displaying JS error upon double clicking on text labels
  • EXTJSIV-5522 Ext.String.htmlDecode / Ext.String.htmlEncode should operate on a larger set of characters/entities
  • EXTJSIV-5537 Ext.form.DateField returns incorrect value when localized
  • EXTJSIV-5546 dirtyCls style not applied to slider field
  • EXTJSIV-5559 Ghost image while dragging a panel
  • EXTJSIV-5564 All Date pickers: Not able to select date from date picker by using key board navigation keys, in all examples
  • EXTJSIV-5566 ComponentLoader should suspend layouts when adding/removing items
  • EXTJSIV-5568 ToolbarDroppable.calculateEntryIndex gets wrong index
  • EXTJSIV-5572 Issue with listeners for the store.load() event
  • EXTJSIV-5583 Accessibility : Binding Grid to a form : Month and Today button names are truncated in IE 7
  • EXTJSIV-5610 Web Desktop - Displaying Js Error upon double clicking close button of Accordion Window.
  • EXTJSIV-5631 Combination Examples - Portal Demo - Graph is not displaying in Stock Portlet
  • EXTJSIV-5635 Grids:Column swapping disturb the data in the Grid
  • EXTJSIV-5645 Bug when collapsing the only panel in an accordion layout.
  • EXTJSIV-5652 Toolbar that contains the error in datefield
  • EXTJSIV-5661 Syntax errors when compiling SASS themes
  • EXTJSIV-5663 Global leak in injectLockable
  • EXTJSIV-5669 Grids :Grouping with Remote Summary -The data in the grid get disturb while checking the Project column
  • EXTJSIV-5671 Combination examples: Kitchensink: Locking grid: lock/unlock options in the drop-down menu seen only first time.
  • EXTJSIV-5685 Grouping Feature error after remote data update.
  • EXTJSIV-5687 Ext.core.DomHelper overwrite only accepts DOM elements not Ext.Element instances
  • EXTJSIV-5693 Setting initially active tab using a string ID caused JS error.
  • EXTJSIV-5696 Return false on Tab beforeactivate not handled properly
  • EXTJSIV-5698 Drag/Drop Information Box hides in Ext.Window
  • EXTJSIV-5710 Grids :All Grids :The data under the columns get disturb while checking and un-checking the columns.
  • EXTJSIV-5714 Strange behaviour of DatePicker placing in Panel with vbox layout.
  • EXTJSIV-5718 Toolbars and Menus:Basic Toolbar: The page UI get disturb while mouse over on Choose a Date.
  • EXTJSIV-5730 Charts dont fire click/dblclick events
  • EXTJSIV-5732 Simple Tasks : Text Editor is displaying in the task list panel.
  • EXTJSIV-5737 Simple Task - Creation of New Folder/New List is displaying in wrong location
  • EXTJSIV-5740 Validation error message tool tip has truncated height
  • EXTJSIV-5751 Layout problems in PortalPanel with an anchor layout
  • EXTJSIV-5768 Combo Box - ComboBox Templates - Search results are disappearing on double clicking page next icon on pagination panel.
  • EXTJSIV-5773 Misc- Quick tips - Displaying JS error upon click on Rich Content Tooltip link after mouse hover on Anchor right, rich content button under callout Tip
• Panel (4)
  • EXTJSIV-5149 “mini” collapseMode in border layout doesn’t seem to work
  • EXTJSIV-5312 Ext.form.Panel.getValues() does not respect isDirty argument
  • EXTJSIV-5445 Panels with html are 2px too high in IE quirks
  • EXTJSIV-5505 Corners of framed headers don’t display correctly in old IE
• Tabs (4)
  • EXTJSIV-4178 Positioning problem when using TabPanel and a custom stylesheet
  • EXTJSIV-5315  Closing a tab moves to the first tab rather than going to the previous tab
  • EXTJSIV-5448 Tab icon is cut off in IE8 strict and IE9 strict
  • EXTJSIV-5613 Tabs - Advance Tab - All tabs are closing when closable check box is selected from submenu
• Theme (3)
  • EXTJSIV-5542 Hard coded value in variables/_grid.scss
  • EXTJSIV-5547 Some values are hard-coded values in the SASS files
  • EXTJSIV-5590 Opacity is compounding for components in a deeply nested disabled container
• ToolTips (1)
  • EXTJSIV-5408 Show delay not always working for qtips in tree grid
• Toolbars (1)
  • EXTJSIV-5742 Toolbars and Menus : Basic Toolbar : Top and Bottom arrows are not displaying when click on the scrolling menu button for the second time.
• Tree (7)
  • EXTJSIV-1887 Tree does not allow horizontal scrolling
  • EXTJSIV-3935 TreeStore doesn’t allow root property to be an object path
  • EXTJSIV-4437 BorderLayout accordion region has buggy expand/collapse behavior when floated
  • EXTJSIV-4476 NodeInterface can lose dirty state and fail to send batched updates
  • EXTJSIV-4815 Trees : Drag and Drop reordering : After clicking on ‘Expand All’ and ‘Collapse All’ tree is not behaving as expected.
  • EXTJSIV-5219 Problem whith TreeGrid node (greater than 600 leafs)
  • EXTJSIV-5387 Trees : Drag and Drop Reordering: Expand All button is not responding for the second time.
• Window (4)
  • EXTJSIV-1732 Hiding the progress dialog window while it is being dragged breaks draggability
  • EXTJSIV-5310 Window position changes when resized
  • EXTJSIV-5507 Drag and drop on overlapped windows fires events in both windows
  • EXTJSIV-5608 zIndex is wrong for floated windows
Total: 212

            <h4>Known Issues</h4>

• Animation (1)
  • EXTJSIV-5487 accordion animation doesn’t always complete if you click frequently
• Button (1)
  • EXTJSIV-4768 Layout Managers - Border Layout: “Center” layout and “Splitter above me” layouts are overlapping when clicking three times on “Add Region” button.
• Charts (2)
  • EXTJSIV-5108 can’t create label for type area series
  • EXTJSIV-5657 Charts : Grouped Bar :Displaying Js error upon clicking on “Legends” in the “grouped bar” chart on IE9
• Core (1)
  • EXTJSIV-4942 Element#tgetWidth() returns an incorrect result for naturally widthed absolutely positioned elements in some cases.
• Data (4)
  • EXTJSIV-3316 Ext.ux.grid.FiltersFeature cannot restore state
  • EXTJSIV-4319 Use a parameter other than ‘id’ for server calls
  • EXTJSIV-4335 Duplicate records when calling sync() on a autoSync store
  • EXTJSIV-4372 Grid Filtering Example: Bug with database return packet
• Documentation (3)
  • EXTJSIV-4296 Ext JS 4 and Sencha Touch Docs examples fail on Chromebook, can’t use Example viewer, ReferenceError: Ext is not defined
  • EXTJSIV-5148 Ext.selection.Model documentation bug
  • EXTJSIV-5156 Update documentation that fields (id,text,leaf) are expected
• Examples (1)
  • EXTJSIV-4951 ToolBars and Menus : Basic Tool Bar : All States are not displaying in the combo box once the state is selected in the “Button w/ Menu” through key board .
• Forms (2)
  • EXTJSIV-2081 Issue with “Bullet list” in the form widget editor
  • EXTJSIV-2425 HTMLEditor corrupted when changing background color of selection
• Grid (4)
  • EXTJSIV-5595 Last selected row maintains selection after unchecked on column sort
  • EXTJSIV-5607 Grid: getEditorParent is ignored - nested cell editing is not possible
  • EXTJSIV-5776 Bug relating to a stateful grid with a checkbox selection mode - in applyColumnsState function
  • EXTJSIV-5783 Grid header resizer chooses incorrect resize target when hovering left edge next to a group header
• Layouts (1)
  • EXTJSIV-3704 Ext.layout.container.Box: wrong children margins if using CSS rules
• Misc (12)
  • EXTJSIV-3932 dom.style.setExpression not implemented in IE8
  • EXTJSIV-4091 Grid filters: initial value can be set, but it is not applied
  • EXTJSIV-4421 x-tab-top-over never inserted into any element
  • EXTJSIV-4545 Kitchen Sink - Basic Tabs : By default tab headers are not displaying in Basic tabs.
  • EXTJSIV-4873 Errors calling add method in a checkboxgroup
  • EXTJSIV-4937 Combination Examples : Web Desktop : Notepad :Displaying errors in error console upon double clicking on empty space in the note pad.
  • EXTJSIV-4954 Store Grouping Not Cleared Properly
  • EXTJSIV-5075  NodeInterface “deep” copy only copies a single level
  • EXTJSIV-5125 FiltersFeature - Updating column header class when using a column group
  • EXTJSIV-5130 Neptune theme missing resources
  • EXTJSIV-5254  HTMLEditor.insertAtCursor issues in “Source Edit”; mode
  • EXTJSIV-5484 Ext.form.field.File buttons don’t get the mouse over effect that buttons do
• Panel (4)
  • EXTJSIV-5488 Panel collapse/expand behavior not as expected when called on hidden panel
  • EXTJSIV-5489 preventHeader not honored when panel is programmatically collapsed.
  • EXTJSIV-5544 Intermittent issue with collapseOnDblClick set to true on IE
  • EXTJSIV-5716 Panels with min/max constraints misbehave in a box layout with stretchmax
• Tabs (1)
  • EXTJSIV-3625 TabPanel: defaults: closable true not configurable
• Theme (2)
  • EXTJSIV-3712 4.0.5 tabpanel shows blue strip in header in IE
  • EXTJSIV-5764 Theme slicer requires new build of SDK Tools
• Tree (1)
  • EXTJSIV-4243 Synchronous loading fails if async loading of same class is on going
Total: 40

We’re very excited to announce that Sencha is a Platinum sponsor at this year’s, SourceDevCon May 2-5 2012 in London, UK and Sencha’s CEO Michael Mullany will present the keynote. Building on the success of last year’s SourceDevCon in Split, Croatia, this year’s conference is a four-day program of intermediate to advanced-level sessions and brings speakers from around the globe to present on topics of interest to web developers. Topics include client and server side JavaScript, modern HTML5 and CSS techniques, unit testing, mobile application packaging, web games development, and more.

Get your tickets now and save 25%
As a Sencha community member, you’ll save 25% off the full conference rate of £799 by using the coupon code sencha, that’s a savings of more than £200 ($300). Conference attendees can also take advantage of special lodging rates at the venue, so get your tickets now!

Sencha Focused Topics
Just like last year, this year’s SourceDevCon has Sencha-focused tracks and sessions. There are over 17 sessions on topics devoted to Sencha Touch 2, Ext JS 4.1, Sencha.io, and Sencha Designer. And, the content will be delivered by Sencha’s core dev team and some of the most prominent Sencha community members, such as Brian Moeskau, Jay Garcia, Mats Bryntse, Shea Frederick, Rich Waters, Nick Cooley, Nils Dehl, and Frederic Berling.

Community-driven Event
SourceDevCon 2012 has an intensive schedule of 37 presentation-style sessions spanning across three tracks mark the central two days of the conference. There’s a stellar lineup of speakers from the JavaScript, web development, and design communities, including Douglas Crockford, Remy Sharp, Joe McCann, Paul Kinlan, Seb Lee-Delisle, and Anis Kadri. Highlights of their industry-related presentations include sessions on reaching excellence with JavaScript, Node.JS, MongoDb, PhoneGap, and CanvasJS.

Training Available
Prior to the event, Sencha partner Modus Creates will be conducting a two-day Sencha Touch 2 and Ext JS 4 training session. Register now to get up and running quickly with this pre-event bootcamp.

Join us. Get your tickets now.
SourceDevCon is a great opportunity for networking with your colleagues and learning from industry leaders. Reserve your spot now and save 25% off the full conference rate of £799 by using the coupon code sencha. We look forward to seeing you!

This month, Apple released the “new iPad”, its newest and latest tablet device, featuring a high resolution “Retina Display”, an updated CPU and GPU and more memory. A few weeks before the launch of the iPad, Apple also released iOS 5.1, a mostly maintenance release that included fixes for battery life among various others. 61% of devices are now upgraded to iOS 5.1.

Our HTML5 scorecard typically focuses on what HTML5 developers need to consider when developing for a platform or mobile operating system. Both the new iPad and iOS 5.1 are significant updates in the Apple ecosystem. In this HTML5 scorecard, we’ll look at them independently, explore a few of the issues we found and give developers some guidance on how to work both the new iPad and with iOS 5.1.

In a nutshell, the new iPad is a mixed bag. The new iPad’s display is incredibly fine grained and web site text now appears unbelievably sharp. On the other hand, the browser experience is noticeably slower with stutters and redraws on complex web pages and web apps. Images that haven’t been updated for retina displays now appear blurry in contrast to the sharp text. iOS 5.1 doesn’t offer many new features, and it does take a step backwards. For hybrid apps (web apps packaged in a native shell), iOS 5.1 breaks localStorage and WebSQL persistence, so developers can’t rely on them anymore.

iOS 5.1

As has been widely reported by web developers, iOS 5.1 has changed the behavior of an embedded WebView. WebViews power HTML5 applications that live inside of native packages, such as PhoneGap or Sencha Touch native packaging. They provide an embedded web browser that is hosted within a native application, permitting the distribution of web apps to native app stores. WebViews are a feature of all modern mobile operating systems.

Prior to iOS 5.1, when an embedded WebView was used, data stored locally using HTML5 storage was kept persistent. Specifically, if your application used localStorage or WebSQL, it was considered part of the application’s data. When a new version of the app was installed or the app was hard-closed, the persistent data was kept around. The next time the app started, the localStorage would appear as if it had never gone away, exactly as what happens in Mobile Safari.

In iOS 5.1, this data is no longer considered persistent and is treated as temporary or transitory data, so iOS can destroy it at any time, without warning, including during low memory scenarios. This is probably because Apple can’t reliably iCloud backup, or iCloud sync from anything that’s not stored in the native CoreData storage. As such, they’re pushing developers to move to Apple native data systems to make apps iCloud-ready. Of course not everybody will want to do this. For developers who relied on localStorage or WebSQL as their mechanism to store data in their app, breaking this mechanism is a big deal. There are various workarounds, such as using the PhoneGap-SQLPlugin which uses the underlying SQLite, or writing your own JavaScript bridge to CoreData.

We also poked around iOS 5.1 to see if there were new HTML5 features like CSS regions or support for the File API or any other new web platform features. We used our favorite tool, haz.io which builds on the open source Modernizr detection library to see what’s new under the hood. In short: nothing. No new features showed up between iOS 5.0 and iOS 5.1. iOS still features some of the best HTML5 support on any mobile browser, but this latest incarnation hasn’t increased the depth of Mobile Safari’s support for the standards. We’re hoping to see CSS Regions come to iOS soon, as it’s supported in Safari 6. Mobile Safari reports “5.1” as its version number, so it’s likely only a matter of time until we get the ability to use the Regions feature. We were also looking to see if WebGL, which is currently only available for Apple iAds, is available in the public browser. haz.io reports that WebGL is supported in Mobile Safari, but when we used the Khronos demo repository to test, we were unable to get any of the demos to work.

For the HTML5 developer out there, heed the warnings when using localStorage or WebSQL in a packaged app on iOS 5.1, and don’t expect any new HTML5 features in iOS5.1 Mobile Safari.

Retina iPad

For HTML5 developers, the most obvious thing about the Retina Display iPad is the huge number of pixels that the device now manages. The new iPad sports a resolution higher than a 1080p television. User interfaces are doing more than 4x the work pushing all the new pixels around. The new iPad houses an Apple A5X CPU together with a PowerVR SGX543MP2. The A5X is a dual core ARM-Cortex A9 design, running at 1GHz, and the GPU is a quad-core design running in roughly the same graphics class as the Nvidia Tegra line. From what we can tell, the main difference between the A5 (which powers the iPad 2 and the iPhone 4S) and the A5X is the new quad-core GPU. Given the new pixel density, it stands to reason that it’s the most upgraded component of the new iPad’s processing subsystem.

Since we’re focusing on HTML5 developers, we focus on web benchmarks for performance. We re-ran the iPad 2 with iOS 5.1 along with the new iPad with iOS 5.1 and found a set of interesting results. As usual, we turned to SunSpider and the V8 Benchmark Suite for raw JavaScript processing power. We found (and perhaps given the new display’s tax on the whole system this is unsurprising) that new iPad was marginally slower than the iPad 2. The SunSpider score is about 150 points slower than the iPad 2, and the V8 Benchmark was 45 points slower. We ran the tests a few times and while the specific numbers were a bit different each time the overall result was the same: on pure JavaScript processing, the new iPad is slower than the iPad 2.

We then turned our attention to some complex web sites and apps to see how the new iPad performed with graphics. We turned to our Sencha Animator Kickfu demo, which is a very complex CSS3 animation, and were pleased that it ran reasonably well. Wanting to push it a bit further, we decided to pinch-zoom in and try to play the game again and this time we saw an immense amount of tiling occurring. This severe tiling seems to have been introduced in iOS 5, so it’s not a new iPad thing, but definitely an artifact introduced in newer iOS’ that hasn’t gotten better with new hardware.

Our tests always include Canvas, and we tested our two current favorite Canvas apps, Canvas Rider and Canvas Cycle. Both of them test the CPU/GPU and the browser’s Canvas drawing engine. The new iPad does fine here, rendering both of these examples with the same performance as the iPad 2. Given how fast the iPad 2 is, it’s impossible to visually discern any difference in Canvas performance between the two devices.

In general web browsing, we did notice one notable difference between the iPad 2 and the new iPad. It draws much more slowly on complex pages. For example, on the Ext JS examples page, when scrolling the page, it visibly loads in new tiles at the bottom of the page while moving. Also, when zooming in on image rich pages such as our Sencha Touch 2 product page, the same tiling behavior occurs again that rarely occurred on the iPad 2. It’s clear that this is due to the the new Retina Display. It’s very likely that images and other assets being transferred to the GPU are taking more time (and bus bandwidth) than the device can handle in real time.

We’re definitely not hardware or chip experts here, but we figured we’d dig a little with the iFixit breakdowns to see why this might happen and if were parts on the new iPad that were not upgraded to match the new resolution. The iPad 2 uses an Apple A5 System on a Chip, which includes 512 MB of DDR2 RAM in the SoC package. Compare that to the new iPad which has an A5X SoC, which does not include the memory in the SoC package. Rather there are two 512 MB Elpida DDR2 chips. The new iPad has two times the memory, and four times the pixels to push, but runs the memory bus at the same speed as the iPad 2. Again, we’re not experts on embedded systems design, but it stands to reason that some of the graphics performance issues we are seeing, (especially tiling and performance degradation from box shadows) might be caused by this system imbalance.

The New iPad and iOS 5.1: tips for the HTML5 developers

We’re usually effusive about the latest mobile browser and hardware from Apple. But this latest offering is a mixed bag at best and a disappointment at worst. For the last few years, we’ve grown accustomed to Apple leapfrogging the competition each year with superior hardware and even better HTML5 browser software. The latest set of Apple hardware has regressions compared to the iPad 2 including slower JavaScript performance. And with iOS 5.1, the removal (or breaking) of features that developers have trusted is a real letdown. While we believe that the iPad is still the best tablet in the market, it’s the first time a new Apple product hasn’t categorically outshone its predecessor. Particularly for business applications, there is no reason to choose the new iPad over the iPad 2.

The current AT&T API Platform SDK is based on Sencha Touch 1.1, but will be upgraded to Sencha Touch 2, once the release passes the AT&T validation process.

Network Services for HTML5

Web apps and carrier network APIs are a match made in heaven. The strength of the web has always been that content is easy to publish and users can access that content from any browser, anywhere. The downside of the web has been the difficulty of identifying end users’ identity and location. Before Facebook, it was difficult to create applications that relied on peoples’ real identities. And even now, payments on the web is often a tedious multi-step process, with repetitive entry of personal details and credit card information.

With the AT&T network services APIs, however, we think that this can become a thing of the past. Because your mobile service provider knows which device belongs to whom, and already has a billing relationship with you, it’s now possible to simplify the creation of apps that provide easy billing and device identification (among other capabilities) to developers. While it’s been possible for a while to include carrier billing using other payment services, we think the fact that the service is coming directly from your mobile provider and it’s easy to integrate, makes all the difference.

The Platform SDK APIs

Here’s the run down and a brief description of the APIs, as well as why you might consider using them.

• The Payments API is perhaps the biggest draw for developers. Using it, you can create one time, recurring and subscription charges. You can also even process refunds directly through the API. Today the API is limited to virtual goods transactions only, between $0.99 and $25.
• Device capabilities allows you to look up the make and model (and other capabilities) of the device that your application is running on. The benefit of a network API vs. a useragent lookup is that it’s non-spoofable.
• MMS and SMS APIs are available and easily integrated (we show an SMS example below)
• And finally, an Oauth 2.0 service allows users to authenticate against their AT&T account for access to a third party service.

There is also a device location API which allows non-spoofable location information to be returned to an application, although we imagine in most cases, browser-based geolocation suffices for most applications.

Sample Code to Access SMS

The code to access network APIs is quite simple. Below is the code required to create and send an SMS from the AT&T Network SDK. It’s just six lines of code.

MyApp.provider = new Att.Provider();
MyApp.provider.sendSms({
  address : "5555555555",
  message : "Hello from Sencha and AT&T",
  success : function(response) {…}
  failure : function(error) {…}
});

As you can see, although there is work to install and configure the server-side, once it’s ready, the client side code required is trivial.

How to Get Started

For all things AT&T, developers can get started at the AT&T developer program home page. Then head over to the Platform SDK home page, where there’s a very thorough guide for how to sign up for the developer program and get your merchant billing account. Finally once you’re ready, you can grab the AT&T Platform SDK itself as well as its sample apps.

• AT&T Developer program homepage
• AT&T Platform SDK for HTML5 homepage
• Download Getting Started Guide (PDF)
• Download AT&T Platform SDK for HTML5
• Download Sample Apps

Download Sencha Animator 1.2

Let’s take a look at what’s new in this latest release.

New interactivity options

To help you create an even richer experience for your end users, we enhanced the interactivity options in Animator by adding:

Touch events

Animator now provides touch events alongside the previously available mouse events, to unlock a wider set of interactions on mobile devices.

Edit JavaScript in an external editor

To make things easier for people that like to use their code editor of choice, it is now possible to launch an external application to edit JavaScript code directly from Animator.

Improved export

We keep discovering new and surprising ways in which our customers use Animator to create the most incredible things, from games to ads. It’s hard to predict exactly what you will be using our export for, so to make it even more flexible and useful, Animator 1.2 includes these new capabilities:

Animator now exports the new standards-track CSS3 gradient syntax (which fixes a Firefox bug), but the old syntax is still available for projects targeting webkit-based browsers.

The export options have been refined: we have added the ability to prettify and minify the HTML export and to export individual scenes from a project that contains more than one.

In order to meet the needs of customers doing heavy post processing on generated code, scene duration is now an explicit value. A few other tweaks have been made in order to make the output more readable and predictable. Also, Scenes can now have a CSS ID assigned to them.

UX Tweaks

When it comes to user experience, the Tools team at Sencha is committed to creating the best possible experience, and that means constantly improving and refining the Animator UI. In this release we made a few changes to make your work inside Animator even more pleasant and productive.

We improved the way animation segments are handled in the timeline, so it’s no longer possible to drag and drop one cluster of keyframes inside another. This was leading to unpredictable results.

The stage area received a lot of attention: we now have pixel markers (every 50px when at 100% zoom) to make it easier to visually size and align objects. We also tweaked how guides are created, so you can now create a vertical and an horizontal guide at the same time by dragging from the rulers’ intersection. Rotating a selected object is also much easier: there is a new rotation handle that removes the need to use the property panel.

The object tree now retains state when navigating between scenes, and a scene’s minimum length can now be set numerically in the property panel.

Imported images can be refreshed project-wide, so if you edit assets in an external application, it’s quicker to see the changes reflected in your project.

Performance and responsiveness are important to the user experience of any application: in this release Animator can export large projects more quickly. Various widgets and the property panels were tweaked to be more responsive to user’s input, and the new version of our runtime should produce a slight increase in performance across the board.

What’s next

We hope you’ll like the improvements we made to this latest release of Animator, and stay tuned for more improvements in the near future.

For now go ahead and update to the new version. Since this new version contains significant updates to our runtime, automatic updates will prompt you to download a new Animator installer. You can also download the installer from our site and simply replace the old version with the new one.

Download Sencha Touch 2   Download SDK Tools beta   View Release Notes

Sencha Touch 2 delivers a major upgrade to the app experiences that you create, the efficiency of your work as a developer, and the ability of your apps to participate in the mobile ecosystem.

Built for Speed

When we first thought about what to improve for Sencha Touch 2, one thing was at the top of our list: performance. Performance is a broad-ranging attribute, and one of extreme importance to application users. We’ve left no stone unturned in Sencha Touch 2, optimizing scrolling frame rates, layout speed, load time, and even how quickly a button responds to touch. (You can read more about our improvements in smoothness and responsiveness in our previous article.)

In order to create great user experiences, we felt that mobile web apps had to get a lot faster. We’ve previously focused on making apps feel much faster when they’re being used. Today we’re adding another leap forward in startup performance.

Startup Speed

Startup performance is critical for every app, but web apps have some special challenges. Traditionally, mobile web content has been fetched from remote web servers over high latency connections and inefficient redundant http connections. Mobile web caches have been known for their rudimentary capabilities. While data-driven Ajax UI’s have improved post-startup responsiveness, Ajax by itself, does little to improve initial application load.

The key to improving startup time is twofold – make fewer requests and transfer less data. Sencha Touch 2 does both. First, our new one-line build command automatically pares your app to the minimum possible number of files, which minimizes the number of http requests. Second, our groundbreaking new app loader caches your entire application within localStorage. This bypasses the need to download the app on a user’s second visit- in fact your app could load without making a single web request. This can yield a stunning improvement in the startup speed of your web app – in our example application below, the second visit time is 250% faster when using our loader.

The loader automatically handles application changes. So whenever a user launches your app, the loader automatically checks for updates. If you’re running an older version of the app, it’ll create and download a delta update containing only the changes compared to the version on your device. Because most app updates are small relative to the full size of the app, delta updates mean that your app spends substantially less time on startup. We think the user experience will be radically better, making many connectivity and network latency issues a thing of the past.

We think this levels the playing field between native and web apps. To show how impactful it can be, we’ve equipped all our examples with our new loader. We’ve also created a demonstration video that shows it in action. Watch a quick demo video on Vimeo

Our loader technology is baked into the Sencha SDK Tools, which also sees a new release today. Our new release of the tools includes scaffolding, a simple but powerful capability that automates MVC class creation, deployment which makes it easy to build and deploy your apps, and packaging, to make wrapped apps for native app stores. Download Touch 2 with the new SDK Tools, then watch the new getting started video to see how easy it is to write Sencha Touch 2 apps.

Built for Great Experiences

We’re releasing a collection of fantastic demo applications with Sencha Touch 2 to show you the range of engaging user experiences you can build with it. First is The Watch List – an immersive social movie experiment built by the Touch team. Combining data from Facebook’s Open Graph, YouTube’s HTML5 video API and Flixster’s Movie API, we wanted to share how easy it is to build a world class app. The Watch List can be used to share the movies you’ve seen and want to see. We hope that you enjoy using it as much as we enjoyed building it.

Built for the Mobile Ecosystem

We all love using web technology to build our apps, and in many cases deploying your app from a web server (and avoiding the hassles of app stores) will be the appropriate distribution choice. To make it easier to monetize mobile web deployment, we’ve partnered with AT&T to deliver their carrier-grade API’s for billing, location and more through Sencha Touch. Read more about how you can equip your mobile web app with carrier billing powered by AT&T.

There are also times when your users or your customers want to install and update your app via a native app store. With Sencha Touch 2, that’s as simple as typing a single command. The Sencha SDK Tools now include native packaging, which lets you package and build your application as an Android .apk or an iOS .ipa. The best part? The SDK Tools work on both Mac and Windows, meaning PC developers can package iOS applications. It’s a major step forward for developers since your development platform no longer limits your choice of app stores. For enterprises standardized on Windows, you can use Sencha SDK Tools to package your iOS app as a part of your own internal build process.

In addition to the new packaging features, we’ve also enabled a set of native device APIs that work on both iOS and Android. These device APIs are Camera, Orientation, Network Connectivity, and native confirmation dialogs. The APIs are all accessible from JavaScript and provide identical semantics and signatures regardless of platform.

Built for You!

We’ve also been busy recording screencasts. We’ve done a huge amount of work making Sencha Touch 2 easier to learn and easier to build expertise in. We’ve updated the Sencha SDK Tools, so creating apps is easier than ever. While the SDK Tools are not required to build Sencha Touch 2 apps, they can make app development much easier (and faster). To show you just how easy it is to get started we’ve created a video that creates and deploys a simple app in thirty minutes. Watch the Getting Started video on Vimeo

The new live demonstration videos are part of the massive expansion in learning materials we’ve created for Sencha Touch 2. The new documentation center features complete API documentation as well as over 35 in-depth guides on everything from getting started to native packaging.

Built for Amazing Apps

Sencha Touch 2 sets a new bar for mobile HTML5 applications. You’ll be excited to hear that Sencha Designer 2.0 works in harmony with all of the new deployment features and will support Sencha Touch 2.0 final in our next auto update. You can also look forward to Touch Charts updated to work with Sencha Touch 2. We are proud of this release, but we’re even prouder when we think of the amazing applications that you’ll build with it.

With over 15,000 forum posts in the Sencha Touch 2 forums to date, we are incredibly grateful for the input and energy of our engaged and knowledgeable community. The community helps with everything from helping newcomers get familiar with the framework to advising on those final polishing touches. Ultimately, the measure of our success is only the reflection of the amazing apps that we help you build! We hope we’re equipping you to build extraordinary apps!

Download Sencha Touch 2   Download SDK Tools beta   View Release Notes

h4. Follow Sencha Touch 2 Development

If you missed all the great progress in our development of Sencha Touch 2, catch up with our release blog posts from the last three weeks:

• Feb 1: “Sencha Touch 2 Beta”:http://www.sencha.com/blog/sencha-touch-2-raising-the-bar/
• Feb 8: “Sencha Touch 2 Beta 2”:http://www.sencha.com/blog/dive-into-dataview-with-sencha-touch-2-beta-2/ and a tutorial on DataView
• Feb 14: “Sencha Touch 2 Beta 2”:http://www.sencha.com/blog/sencha-touch-2-beta-3-kindle-fire-and-chrome-support/ added support for Kindle Fire, and Chrome for Android
• Feb 22: “Sencha Touch 2 Release Candidate”:http://www.sencha.com/blog/sencha-touch-2-rc-native-packaging/
• Mar 6: “Sencha Touch 2 GA”:http://www.sencha.com/blog/announcing-sencha-touch-2/

In parallel to the roadshow, I have been visiting with many of the top Flex enterprise customers and many are well underway planning and building applications with Sencha. Additionally many of the leading Flex consulting firms and individual Flex consultants have attended Sencha training and are now beginning to build a new practice around application development on HTML5.

I am especially excited to announce that Sencha will be sponsoring 360Flex in Denver on March 15-18. I will be presenting a keynote at the end of the day on March 16 and we have a great party planned directly afterwards onsite.

Here are more upcoming dates on the Flex to Sencha Roadshow:

March 5 – New York

March 6 – Boston

March 8 – Chicago

March 12 – Philadelphia

March 13 – Atlanta

March 21 – Seattle

March 22 – Nashville

March 24 – FITC Spotlight JavaScript

March 29 – Los Angeles

April 3 – Washington DC

April 5 – Bay Area Mobile

April 15 – 360|Flex in Denver

April 23 – FITC Toronto

April 27 – Adobe Camp Brazil

May 1 – Wellington, New Zealand

May 3 – WebDU – Sydney Australia

I look forward to meeting you on the roadshow and highlighting why Sencha is the next platform for application developers.

We’ll tell you how to do that in this blog post. We’ll also introduce you to a new performance measurement tool releasing with Ext JS 4.1, Page Analyzer. Measurement is key when it comes to improving the performance of your applications. You need to figure out what to measure and how to measure it so you can identify bottlenecks in your code and take the right steps to eliminate them. Page Analyzer helps you do that. Finally, we discuss grid optimization and introduce you to another new Ext JS tool for evaluating grid performance, Infinite Grid Tuner.

As we’ve worked with Ext JS developers, we’ve noticed a few common trends in the way applications are written that provide opportunities for performance tuning. We can’t enumerate every single coding technique that might bog down your application; however, we’ve seen that the way developers use the framework in the following areas can often stand in the way of a high performing application.

General optimization tips

Here are a few things you can do to avoid common areas that slow down Ext JS code.

Check your event listeners

The way your application uses event listeners is a key performance concern. For example, you might set a load event to fire the first time a store gets data. If you’re not careful, that same load event might fire every time the store gets new data. Turning that off, and having load fire only the first time the store retrieves data can make a substantial difference in the overall performance of your application. To do this, add single:true to your listener:

listeners: {
    load: onFirstLoadData,
    single: true
}

Another event to be careful of is afterrender, which fires after all DOM elements already exist. Changing elements after rendering causes reflows, slowing your application. Instead, adjust classes and set styles before rendering takes place using beforerender so that the element renders with the correct classes and styles. Some code that must run after render may require the element size to have been acquired. Ext JS 4.1 provides a new event, boxready, which you should consider using if that is the case. It runs after the size of a component has been determined.

Remove doLayout and doComponentLayout calls

Simply put, remove these expensive calls whenever possible. In older versions of Ext JS (prior to 4.0), doLayout was how you told the framework you were done with a component or container and to go ahead and recalculate its layout. Even in Ext JS 4.0, these calls were sometimes needed after direct DOM updates or to work around certain bugs.

With Ext JS 4.1, layouts are triggered differently, so your code should seldom need to call doLayout or doComponentLayout. If it turns out that these calls are still needed as bug workarounds in your application, please file a bug report so we can fix it.

The only time doLayout or doComponentLayout should be needed for non-bug reasons is when the DOM is directly changed by application code. Since the framework is unaware of such changes, these calls are needed to update the affected layouts.

Reduce container nesting

We often see applications with excessive nesting of containers. For example, there might be a container that owns a single container which owns multiple components where all the work is taking place. You can often eliminate the outer container and accomplish the same thing with one container. It is important to remember that each container takes time to initialize, render, and layout, so the more you can get rid of unneeded nested containers like this, the faster your application will run. Look for code like the following (the “id” properties are seldom seen in practice but are added here to clarify that there are two containers):

{
    id: 'container1',
    items: [{
        id: 'container2',
        items: [{
            id: 'component3'
        }]
    }]
}

If possible, the above should be reduced to a single container:

{
    id: 'container1',
    items: [{
        id: 'component3'
    }]
}

Replace Panels with Containers

Remember that Ext JS Panels are more powerful (and expensive!) than basic Containers. So specify xtype: 'container' to avoid having your application use the default 'panel', as shown below.

{
    xtype: 'container', // defaultType is 'panel'
    items: [ ... ]
}

Reduce border layout nesting

With Ext JS 4.1, there are many cases where you no longer need to use nesting with the border layout. Removing this nesting will reduce the time to initialize, render, and layout your components. Previous versions of Ext JS required nesting when you needed, for example, to have two or more instances of the same region. You also had to nest border layouts if you needed two North regions above the center region. Now you can just have two North regions as part of the single border layout.

With Ext JS 4.1, regions can be added dynamically when they are needed, instead of having to add all regions up-front and hide them when not in use. You can also use the weight property to give precedence to a region—for example, giving precedence to the West region over the North region. All these changes mean that you should not often need nesting with border layout, speeding up rendering of components that use that layout.

Reduce DOM reads and writes

With Ext JS 4.1, we have tuned how layouts interacts with the DOM to reduce reads and writes wherever possible. You should do the same with your code. DOM reads by themselves can slow an application, but they have especially high-overhead when mixed with DOM writes, as this combination causes reflows. Try to manipulate styles and classes using beforerender so they are rendered with a component instead of changed after rendering. Avoid using setStyle, addCls and removeCls, and other direct DOM element modifications which cause writes. As a general rule, for better performance, try to manipulate the DOM in batches of reads and writes when writes are needed.

Eliminate extra layouts with Ext.suspendLayouts and Ext.resumeLayouts

Ext JS 4.1 provides two new methods, Ext.suspendLayouts and Ext.resumeLayouts, to help you coordinate updates to multiple components and containers. Adding two items in rapid succession to two containers, for example, causes multiple layout and render operations to be performed. If you use Ext.suspendLayouts before you add these items the framework will no longer perform the layout for each individual item. Once you’re done making your additions, use Ext.resumeLayouts and the framework will perform a single render and layout operation.

Keep in mind that it is not only adding items to containers that can trigger a layout. Other operations and changes to components and containers will also trigger layouts. It is important to analyze use cases in your application that have performance issues and make sure there are no extraneous layouts being performed.

{
    Ext.suspendLayouts();
    // batch of updates
    Ext.resumeLayouts(true);
}

Introducing the Ext JS Page Analyzer

Ext JS 4.1 includes a new tool to help you look at what’s going on under the covers of an application and measure its performance. You can also use it to quickly measure the performance impact of changes you make to code. Page Analyzer loads Ext JS 4.1 pages and instruments them with diagnostic hooks. The Page Analyzer contains many experimental features, but perhaps the most useful for optimizing application performance is the Layout tab, which we’ll take a look at in a moment.

You can find the tool in the Ext JS 4.1 Examples folder, at the following location in the SDK:

./examples/page-analyzer/page-analyzer.html

Copy the entire “page-analyzer” folder on the server that also hosts the application you want to analyze, since browser security only allows the kind of communication required by Page Analyzer between pages from the same server. Also, be sure the version of Page Analyzer you use matches the build number of Ext JS, since it won’t work if you’re using a different build.

As you use it, remember that this is the first release of the tool and that it’s a work in progress. Please give us your feedback about the tool through the Ext JS forum.

Here’s how to use page analyzer:

1. Open a browser and enter the URL for Page Analyzer.
2. When it opens, type in the address of page you want to test.
3. The page then loads in an iframe, which is why the tool and the application have to be on the same server. Page Analyzer will look something like this when you open the page:

4. Click the Layout tab. You will see a set of layout runs, like this:

5. You’re looking for multiple layouts of the same components. When you find that, go back to your code and see if you can eliminate anything that reduces layouts of that component and improve performance.

Grid optimizations

Ext JS grids can pose a particular problem for web application performance, especially those that represent large data sets. When grids render small data sets, speed is not an issue. However grids with large data sets that call for so-called “infinite scrolling” can pose performance bottlenecks if they’re not created with some care. Infinite scrolling relies on a page cache where a paging scroller object stores pages of the dataset before the user scrolls to the part of the grid that needs to display it.

As the user scrolls, the cached data becomes visible and then disappears off the top of the page and is typically no longer kept in the DOM. The main way to tune this is to keep the DOM size as small as possible, and cache data on the client side to minimize server round-trips.

Scrolling terminology

When a data store is configured with buffered: true, a PagingScroller object is instantiated to monitor scrolling of the View (grids are specially configured data Views), and attempt to maintain a cache of pages ready to provide data immediately it becomes needed as the view traverses down the dataset.

In the diagram below, the user has scrolled the view some way down the dataset. The PagingScroller maintains a leading buffer zone of records ready to render in the direction of travel, and a slightly smaller zone behind the direction of travel.

The PagingScroller requests that the data store ensures that the trailingBufferZone, and the leadingBufferZone are in the cache. This causes the store to calculate which pages that requires, and ensure they are cached. The store only makes Ajax requests pages that are not already in the cache.

As the view scrolls down, the edge of the rendered table almost comes into view. When it is numFromEdge rows from reaching the edge, the datastore is reloaded with data from further down the dataset, and the vertical position synchronized to keep the visible rows at the same position. When the required data is in the page cache, this operation is instantaneous and invisible. If the scroller is dragged down past the cached pages, an Ajax request will be made, and there will be a LoadMask displayed until the data arrives.

If scrolling proceeds at a reasonable pace, and the leading edge of the “required zone” moves into a page which is not in the cache, an Ajax request is fired off for that page. In most cases, if the leading buffer zone is large enough, it will arrive in the cache before the rows are needed by the rendered table.

By default the page cache only stores the most recently used 5 pages. This can be increased if the dataset will be “browsed”, so that a larger proportion of the dataset is cached in the client, and fewer Ajax requests are made. The store’s purgePageCount controls this behavior.

If the dataset is not unreasonably large—up to maybe 50,000 rows, then it may be desirable to cache the entire dataset on the client. Configure the store with purgePageCount: 0 to never discard pages once they are cached.

How you design this depends on how large the table is that’s being rendered and browser speed. The larger the table, the more it can scroll without having the edge come into view and without having to refresh the data from the prefetch buffer. However, the more data obtained from the prefetch buffer, the longer the delay in re-rendering. You need to maintain a balance between how much data is visible and how frequently re-rendering is required. If your application targets a fast browser, you can display a larger set of rows and data. For slower browsers, display a smaller table with fewer rows that reaches a visible edge more often and has to refresh more frequently

To help you tune grids, Ext JS 4.1 includes an example called Infinite Grid Tuner, which you can find in the Examples directory. Infinite Grid Tuner includes a large data set—50K of records—and lets you set different ways to load the data into the store to prime the prefetch buffer. For example, you can simulate Ajax latency, change the number of rows that are prefetched, and tune the table size. You can experiment with the various parameters, shown on the left of the next image, to see what works best in the browser(s) your application targets.

Using the Infinite Grid Tuner, you can also adjust the purge page count setting of the store. This sets the amount of data that’s removed from the page cache after it’s been rendered. If you set this number to 0, it keeps all of the data in the buffer, which means that if the user scrolls back up the grid, the data is reloaded without having to refetch data from the server.

Two other concepts to keep in mind as you experiment with the tuner: A grid’s visible data set can be thought of as a sliding window. Similarly, the page cache can also be thought of as a sliding window into all the data associated with the grid. You can change the size of both using the tuner. You can also set the rules for when each is replenished, determining at which point in user scrolling (the number of rows from the visible edge) to request more data for the visible part of the grid and the page cache.

Additional Resources

The following resources are also useful for application performance tuning:

• View a 50-minute webinar video version of this blog
• Suggestions from other Ext JS users in the Sencha Ext: Open Discussion forum Performance Best Practices thread
• Tips for optimizing Internet Explorer 8 and higher
• Information about dynaTrace performance management technology for Internet Explorer and FireFox
• Chrome Speed Tracer website and tutorial
• Firebug profiler tutorial

This article was written by Don Griffin and Nige White.

Sencha Animator is very flexible, and it can be used for a variety of purposes, from prototyping mobile applications to creating interactive animated features for iBooks. This tutorial shows how an animation can quickly be enhanced to an interactive mini-app by adding actions and custom code.

Download Sencha Animator  Download Project Files   View Animator Docs

Before you get started

To successfully complete this tutorial, you will need to be familiar with Animator. Before getting started, it’s a good idea to have absorbed the basics:

• Download and install the latest Sencha Animator.
• Review Animator documentation and follow the Animator Quickstart tutorial.
• Download project files and resources. They include a partially built “before” version, startQuiz.animproj, which you can open in Animator and use during the tutorial so we can focus on adding interactivity, logic, and JavaScript code. Also included is an “after” version, finishedQuiz.animproj, which shows the finished project after completing the steps described in this tutorial.
• Have a WebKit browser like Google Chrome or Apple Safari to preview your Animator projects. (You can also use the iOS Simulator included with Xcode for Mac OS X.)

Open the project

Open startQuiz.animproj in Sencha Animator. In the Scenes Panel, you should see five scenes, as follows:

1. Intro
2. Questions
3. Incorrect
4. Correct
5. Score

Select and run each scene to see what it does. You should also select the elements in each scene to familiarize yourself with them before we start adding interactivity. As you select elements, keep in mind that Animator lets you select an object on the Center Stage in two ways:

• Base state mode. When you select an object that’s not on a keyframe, Animator displays it inside a purple box in the Center Stage. To view an object in this mode, click its name in the Object Tree or click the object in the timeline in between keyframes. Selecting an object in base state mode means you can edit its base properties, which persist with the object throughout the scene.
• Keyframe mode. When you select an object currently on a keyframe, Animator displays it inside a blue box in the Center Stage. To view an object in this mode, click on a keyframe in the Object Tree. Selecting an object in keyframe mode means you can edit its keyframe properties, which can change when the object reaches the next keyframe.

In the File menu, select “Preview Project in Browser” to view the project in the browser. You’ll see the first scene, which doesn’t allow for any user interaction yet. We’ll take care of that in the tutorial by adding actions and a little JavaScript code to each scene. In the process, we’ll turn the project into a generic interactive quiz template.

Scene 1: Intro

Select Scene 1 in the Scenes Panel, and select the element called Button in the Object Tree. You can also select it in the Center Stage — it contains the text “Start”. In the Property Panel, in the Click action property under General, select “Go to next scene”. When the user clicks the button in the running animation, it will now advance to the next scene. Go ahead and try this by saving your project and selecting Preview Project in the File menu. (Be sure to save your project from time to time after this.)

Let’s also add some JavaScript to initialize a new set of quiz questions. Be sure the Intro scene is selected in the Scene panel, and in the Property Panel set the Start property under Actions to Custom JavaScript. Click Open editor and paste the following code into the Custom JS window:

// Create a global object/namespace for the project to use.
if (typeof(quizData) === "undefined") {
    quizData = {};
}
 
// To help work with scenes, translate some
// scene ids into names. The scene id can be found
// by hovering the mouse over a scene in the Scene Panel. 
if (!quizData.sceneIDs) {
    quizData.sceneIDs = {
        question: 1,
        wrong: 2,
        correct: 3,
        score: 4
    };
}
 
// Set up some questions.
if (!quizData.questions) {
 
    // Each question text entry consists of a question, 4 answers,
    // and the index of the correct answer.
 
    quizData.questions = [
        {
            question: "Which one of these is a CSS3 property?",
            answers: [
                'animation-degradation',
                'animation-path',
                'animation-fill-mode',
                'animation-speed'
            ],
            correctAnswerIndex: 2
        },
        {
            question: "What is the syntax to start a keyframe segment in CSS3?",
            answers: [
                "@keyframes 'name'",
                "@animation 'name'",
                ".element:animation",
                ".element:keyframes"
            ],
            correctAnswerIndex: 0
        },
        {
            question: "Which is a valid CSS3 animation-timing-function?",
            answers: [
                'slide-in',
                'ease-out',
                'jump-out',
                'fast-in'
            ],
            correctAnswerIndex: 1
        }  
    ];
 
}
 
// Set up or reset variable for the current question.
quizData.currentQuestionIndex = -1;
 
// Set up or reset variables to keep track of score.
quizData.scoreRight = 0;
quizData.scoreWrong = 0;

Read through the code comments so you can see what each section does. Close the Custom JS window and save the project.

Scene 2: Questions

Select the Questions scene in the Scenes Panel, then select the Question text element in the Object Tree. In the Properties Panel set General->CSS ID to question. This will give the DOM element an ID of question in the exported code so it can easily be referred to from JavaScript code. Similarly, set the CSS IDs of the four buttons (from top to bottom in the Object Tree) to button1 (top-most), button2, button3, and button4. Note that Animator will not let you assign the same CSS ID to two elements; Animator automatically changes any redundant name.

Be sure the scene is still selected in the Scenes Panel, and in the Properties Panel, under Actions, se the Start property to Custom Javascript and add the following code, again being sure to review the comments so you can see what each section does:

// Increment the question index.
var index = ++quizData.currentQuestionIndex;
 
// If there are no more questions, go to the Score scene.
if (index >= quizData.questions.length) {
    controller.startSceneByID(quizData.sceneIDs.score);
    return;
}
 
// Get the current question.
var currentQuestion = quizData.questions[index];
 
// Get references to the different elements on the stage;
// notice that the text we want to edit resides inside
// span elements.
var question = document.querySelector('#question span');
var button1 = document.querySelector('#button1 span');
var button2 = document.querySelector('#button2 span');
var button3 = document.querySelector('#button3 span');
var button4 = document.querySelector('#button4 span');
 
// Update the question text.
question.innerHTML = currentQuestion.question;
 
// Update buttons and answers.
button1.innerHTML = currentQuestion.answers[0];
button2.innerHTML = currentQuestion.answers[1];
button3.innerHTML = currentQuestion.answers[2];
button4.innerHTML = currentQuestion.answers[3];
 
// Store the correct answer index.
quizData.correctAnswerIndex = currentQuestion.correctAnswerIndex;

Preview the project again, and you should see that the questions and answers have been updated.

Next, add logic to each of the objects labelled Button to detect if an answer is correct. One at a time for each button, in the Properties Panel select the Custom JavaScript in the Click action property under General, and the following JavaScript, setting buttonIndex in each Button (from top to bottom in the Object Tree) to 0, 1, 2, and 3:

// Check if this is the button with the correct answer.
var buttonIndex = 0;
if (quizData.correctAnswerIndex === buttonIndex) {
    controller.startSceneByID(quizData.sceneIDs.correct);
} else {
    controller.startSceneByID(quizData.sceneIDs.wrong);
}

Scene 3: Incorrect

Select the Incorrect scene in the Scenes Panel, then select the Answer text element (which contains the text “Texas” in the Content field under General in the Properties Panel) in the Object Tree. Set the CSS ID for the Answer element to correct-answer. Then set the start action of the scene to Custom JavaScript and insert the following code:

// Get the current question.
var question = quizData.questions[quizData.currentQuestionIndex];
 
// Get the element that displays the correct answer.
var correctElement = document.querySelector('#correct-answer span');
 
// Update the answer.
correctElement.innerHTML = question.answers[question.correctAnswerIndex];
 
// Increase the wrong answer score.
quizData.scoreWrong++;

Set the click action for the object called Button (which displays the text “Continue”) to Go to Scene and select “2. Questions”.

Scene 4: Correct

Select the Correct scene in the Scenes Panel, set the start action of the scene to Custom JavaScript, and insert the following code in the Custom JS window:

// Increment the correct score.
quizData.scoreRight++;

Select the Button element in the Object Tree, set its Click action property to Go to scene, and select 2. Questions. You may have to open the disclosure triangle next to the Click action property to view the list of scenes.

Scene 5: Score

Select the Score scene in the Scenes Panel, then select the Score element in the Object Tree. Set its CSS ID to final-score. Then set the start action of the scene to Custom JavaScript and insert the following code to the Custom JS window:

// Get element for score.
var scoreElement = document.querySelector('#final-score span');
 
// Get score and total possible points.
var right = quizData.scoreRight;
var total = quizData.scoreRight + quizData.scoreWrong;
 
// Create score text.
var text = right + '/' + total + ' points';
 
// Display score text.
scoreElement.innerHTML = text;

Finally, set the Click action property for the scene’s Button element to Go to scene and select “1. Intro”.

Finishing Touches

To make this display well on an iPhone, we need to add meta tags to make the app occupy the full screen and so it can be easily saved as a web app on the Home screen. Note that the dimensions set for the app are optimized for full screen mode. We also add a couple of lines of JavaScript to hide the address bar when the page loads.

To do that, select the Project tab, click the Head HTML field under Export, and enter the following code:

<meta name="viewport" content="user-scalable=no, width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes">
<script type="text/javascript">
// hide the address bar
window.addEventListener("load",function() {
    setTimeout(function(){
        window.scrollTo(0, 1);
    }, 0);
});
</script>

Deploy the App

Now that the project is complete, select Export in the File menu to create a directory containing an HTML file for the project and its image assets. You can put this directory on your web server to host the quiz mini-app. Here is a link to a hosted version of the app. If you have access to an iPhone or the iOS Simulator, save the app to your home screen and see how it works!

Conclusion and Next Steps

This guide has shown you how to add actions and custom code to create rich interactive animations that can be combined into a mini-app with little effort.

Since the mini-app is based on open standards it can easily be extended. It could be wrapped for native and submitted to the App Store. Instead of using hard-wired content, the app could get questions and answers through a JSON request. It could be integrated with Sencha.io to provide scoreboard functionality and much more.

If you expand this application, go ahead and show us your work by creating a new thread in the Sencha Animator forum.