Are You Ready for Ext JS 5?

Ext JS 5 New Features

Ext JS 5: Getting Ready To Upgrade


We are very excited to welcome Ext JS 5 to the Sencha family! As with every major release,
Ext JS 5 will introduce a bunch of new features, including:

  • Tablet support
  • Two-way data binding
  • New MVVM Application Architecture
  • Widgets and the Widget Column
  • Crisp Theme
  • Routing
  • and much more!

Please read our What’s New in Ext JS 5 guide for a complete list of our exciting new features.

Want to learn more about Ext JS 5 and ask questions about upgrading? Register now for our one-hour webinar on 4/24/14 at 10am PDT — Are You Ready for Ext JS 5.

Update: May 14, 2014
The recording for the webinar is up! Check it out below.


Testing 1, 2, 3


While there are lots of new features in Ext JS 5, many of these changes are under-the-hood. With the release of Ext JS 5 beta, we want to help you prepare your application for the upcoming GA by highlighting the following areas.

Our Ext JS 5 upgrade checklist will use the following rating system to indicate how difficult the upgrade process will be for each change:
Ext JS 5 Difficulty Scale

Ext JS 5 Difficulty Scale EasyRemoving Legacy Browsers

Ext JS 5 has removed support for IE6, IE7 and older versions of other browsers — which allows for a significant reduction in logic and styling across the entire framework. Coupled with additional optimizations, Ext JS 5 is an amazing step forward for enterprise web applications!

Removing Legacy Browsers

Ext JS 5 now supports the following browsers:

  • IE8+ (standards mode only)
  • Firefox 12+ (PC & Mac)
  • Safari 6+
  • Chrome 18+
  • Opera 12+ (PC & Mac)

Most developers know which browsers they need to support, so we anticipate this part of the upgrade will be easy.

Ext JS 5 Difficulty Scale EasyDoctype

Another important change in Ext JS 5 is that we now recommend the use of the HTML5 doctype:

<!DOCTYPE html>

Omitting this doctype or using something different could result in strange behavior, such as incorrect display, positioning issues, etc. The HTML5 doctype is supported by IE8 and is the new standard doctype with backwards compatibility for HTML4, so it really makes the most sense for Ext JS 5.

We imagine this part of the upgrade should also be relatively straightforward. If your application has a lot of CSS geared specifically for IE6-7, then changing the doctype might be a bit more cumbersome.

Ext JS 5 Difficulty Scale EasySencha Cmd

With the release of Ext JS 5, it is highly recommended that you use the latest version of Sencha Cmd to generate your application architecture and manage production builds.

The Ext JS 5 framework is now an encapsulated Cmd package — which means that "core" pieces of the framework are now fully modular and even shared by Sencha Touch.

Opening up the Ext JS 5 SDK, you’ll see the following folder structure:
SDK Folder Structure

As you can infer from the package names, packages named with the "ext-" prefix are specific to the Ext JS framework (e.g. "ext-theme-neptune") while those named with the "sencha-" prefix are shared resources across frameworks (e.g. "sencha-core").

It will help to familiarize yourself with the location of these new packages, even though much of the underlying code has not changed.

Ext JS 5 Difficulty Scale EasyAlready Use Sencha Cmd?

If your existing application runs Ext JS 4.2.x and was built using Cmd 4.x, then updating your app via sencha app upgrade should be relatively smooth.
Ext JS applications already built with Sencha Cmd should experience minimal impact when upgrading to Cmd 5.x. See the Sencha Cmd 5 Upgrade Guide for more details.

Ext JS 5 Difficulty Scale MediumNot Using Sencha Cmd?

If your application was not built with Sencha Cmd, you might decide to simply generate a fresh application using sencha generate app and manually copy your /app/ folder into the new architecture in order to take advantage of the many benefits in Cmd. Alternatively, if your application is already using the recommended folder structure, you can just generate the Cmd scaffold on top of the app with "sencha generate app –starter=false".

Customers new to Cmd should certainly expect a small learning curve. See the Ext JS 5: Getting Started Guide for more info.

For those customers who wish to remain independent of Sencha Cmd, you can find more information about the build files (e.g. ext-all.js or ext-all-debug.js) in the Ext JS 5 Upgrade Guide.

Ext JS 5 Difficulty Scale EasyCompatibility Layer

One additional benefit of using Sencha Cmd is the ability to easily control the new compatibility layer, which will help to make the 4.x to 5.x upgrade (as well as future upgrades) as smooth as possible.

Ext JS 5 introduces some new mechanics in how parts of the API get marked as deprecated. To compensate for applications upgrading from a previous version, you simply set your supported framework version in app.json and warnings about deprecated APIs will be output to the browser console.

For example, the class Ext.form.field.Trigger is deprecated in 5.x and using it will throw an error. But if you set the compatibility layer to 4.2, the old behavior will be restored and you will see a warning issued to the browser console. In this manner you can smoothly upgrade each warning rather than experiencing broken APIs.

To configure your application with Ext JS 4.2 level compatibility, simply set the following property in your application’s app.json:

compatibility: {
                ext: '4.2'
            }

Because the compatibility level is an optional development feature, there should be no negative impact to the upgrade process. In fact, using the compatibility level should make the upgrade process easier overall. See the Ext JS 5 Upgrade Guide for more details.

Ext JS 5 Difficulty Scale MediumConfig System

Sencha Touch developers should be intimately familiar with the config syntax for defining classes. Ext JS 5 adopts this paradigm in a slightly modified fashion — more information can be found in What’s New in Ext JS 5.

This change will likely affect any custom components which call initConfig() themselves — so be sure to check your UX classes.

You still need to use "config: {}" to declare new config properties, but derived classes can now set these directly on their class body. This approach allows derived classes to remain compatible with their base even if the base class switches a config over to use the config system.

Classes written for Ext JS 4, where the config system was not used, remain compatible with Ext JS 5 even where the config system is now being used.
The config system will create some work during the upgrade process for developers unfamiliar with the concept. Generally speaking, the framework will issue warnings to the browser console when properties should be moved into a config object, but expect this part of the migration to take some time.

Ext JS 5 Difficulty Scale MediumCharts

With Sencha Touch 2.1, we introduced a new, high performance, touch-optimized charts package. With Ext JS 5, we have enhanced this charts package to work on both Ext JS and Sencha Touch. This brings lots of new capabilities as well as great performance on tablet devices.

The Ext JS 4 charts have been converted into a separate package, so you can still use them when upgrading to Ext JS 5 to minimize your conversion effort. The process of updating to the new charts package simply requires switching out the ext-charts package for the new sencha-charts package. Most of the APIs are the same, and the few that are not are covered in the Ext JS Charts Upgrade Guide.

Our current Ext JS charts will remain in the framework at least until Ext JS 5.1. However, they will not gain any of the new features or functionality included with Sencha Charts.

Many customers have customized the charting package for their applications, so upgrading to Ext JS 5 might cause some friction. While the new charting package is very similar to the old one, expect to find some API differences – refer to the Ext JS Charts Upgrade Guide for more details.

Please note: the new Sencha Charts package in Ext JS 5 beta does not support chart rendering in IE8 because it lacks a VML renderer. We hope to add support for that before the Ext JS 5 GA release.

Ext JS 5 Difficulty Scale EasyMVC and MVVM

Ext JS 4 introduced support for the MVC architectural pattern. With Ext JS 5, we are adding support for a popular alternative to MVC: MVVM (Model-View-ViewModel). One of the big attractions to MVVM is data binding, which connects the model layer to the view — updating the model when the view is modified, and vice versa.

In Ext JS 4, controllers provided a global solution for application-wide logic. Ext JS 5 now offers view-specific controllers that can be associated directly with a view instance. From instantiation to destruction, the ViewController is tied to the component that referenced it.

While global controllers created with the Ext JS 4 MVC architecture operate as usual, creating ViewControllers might be a better fit in some cases. Regardless, the immediate upgrade process should be smooth. For more information about the new MVVM pattern in Ext JS 5, please refer to the View Models and Data Binding Guide.

API Changes in Ext JS 5


We focused a lot of additional energy in making sure the transition from Ext JS 4 to 5 would be as painless as possible. Having said that, some changes should be pointed out to make sure that you are completely aware of the new landscape.

Ext JS 5 Difficulty Scale EasyMicroloader and app.json

Ext JS 5 applications built with Sencha Cmd will now use the Microloader and app.json file, making Ext JS 5 apps very similar to Sencha Touch applications. All extra inclusions should be made via the app.json file. This includes JS and CSS resources which historically were included in index.html.

Users unfamiliar with Sencha Cmd or Touch may experience a slight learning curve, but the Sencha Cmd 5 Upgrade Guide should answer all of your questions.

Ext JS 5 Difficulty Scale EasyExt.dom.Query

Since all supported browsers now have querySelector(), Ext JS 5 has removed Ext.dom.Query as a default requirement. This means that if you still need to use Ext.dom.Query, you’ll need to include it manually. It is also now recommended that you use only Ext.Element methods, (e.g. select(), selectNode() and query()) rather than relying on Ext.dom.Query directly.

The upgrade process for most customers might be as simple as requiring Ext.dom.Query at application start. If you spend the time to replace all uses of Ext.dom.Query with querySelector, then it may take some additional time.

Ext JS 5 Difficulty Scale HardStores & Models

Stores required a few changes in Ext JS 5 that may cause issues for some updated applications. Most notably the remove event now mirrors the add event and only fires once for a range of records instead of once per record. Long-standing issues with the add and datachanged events have also been resolved, which may cause some issues if these behaviors were being relied upon. Finally, buffered store is now its own class of store and should be created using the "type" config (though "buffered: true" still works in most cases).

Models have also experienced an overhaul in Ext JS 5. Several properties on the record object have changed — most notably that record.raw no longer exists, as all data (even undeclared fields) are now available on record.data. Associations have received a lot of attention, and record.destroy() has been changed to record.erase().

Most Ext JS applications rely heavily on data access, so this is likely the place where most customers will experience friction. Please refer to the Ext JS 5 Upgrade Guide for a deeper look at the changes to the Store and Model classes.

Recommended Steps


While a more complete Upgrade Guide is available to help you navigate the full application upgrade, here are some quick recommendations for preparing your application for Ext JS 5.

Upgrade from the latest versions

We recognize that not all of our customers have the luxury of running the latest versions of Ext JS and Sencha Cmd. Time restrictions, deadlines, and support licenses often dictate what version of Ext JS is used by your organization or clients.

Taking the time to first upgrade to the latest versions of Ext JS 4.x and Cmd 4.x will make the jump into our 5.x branch much smoother because you get the advantage of many bug fixes and avoid significant API changes across several major product versions.

Check Overrides and UX

Framework overrides and custom components are usually the places where upgrade bugs are found.

The key is to document every one of these overrides and UX classes, and be sure you completely understand them.

Dissect your application logic

When you get this far in the upgrade process, it is more than likely your application loads successfully in the browser.

Inevitably the trickiest part of a major upgrade is physically testing the app during runtime. Expect most of your time during the upgrade to be spent dissecting your application logic contained inside your Controllers and event handlers.

Suggested Reading


For more information about Ext JS 5, you may want to check out a few of our guides:

20140410-ext-js-5-teaser.png 38 Comments   Read more

Announcing Sencha GXT 3.1 Beta

Introduction

We’re excited to announce the release of Sencha GXT 3.1 beta, available for download here and from Maven Central. This latest release of GXT introduces Theme Builder, a new tool for theming GXT applications, as well as the Neptune theme built entirely with this tool, adds support for GWT 2.6, and fixes a variety of bugs reported by our users. We’d like to gather feedback from our community while we prepare for the general availability of GXT 3.1.

GXT 3.1 Theme Builder

Theme Builder is a tool that takes a simple config file and generates a jar file with all of the appearances necessary to theme a GXT app. The config file format allows for CSS3 values such as border radius and gradients, and Theme Builder creates appearances that can be used in browsers that may not support those features. It does this by using modern CSS and HTML where possible, and otherwise generating images of the required features.

theme {
    name = "neptune"
    basePackage = "com.sencha.gxt.theme.neptune"
    details {
        buttonGroup {
            borderRadius = 3
            border = util.border('solid', '#dfeaf2', 3)
            headerGradient = util.solidGradientString('#dfeaf2')
            font = util.fontStyle("helvetica, arial, verdana", '13px', '#666666');
            ...
        }
        ...

While GXT 3.1 continues to support Java 6, the Theme Builder itself requires Java 7, though the code generated by Theme Builder will be compatible with Java 6. The command line tool is tested to run on both Windows and OS X, as well as several Linux distributions. The shell and batch scripts in the download zip run only on Windows or OS X to keep the zip file from being much larger. To run the script on Linux, a copy of PhantomJS will be required.

With over 350 configuration properties, almost all widgets and cells available in GXT can be themed. For all widgets displaying text, the family, size, color, weight can be specified via a single config. For widgets with borders, the color, width, style can also be specified. In many widgets, padding and spacing is configurable, as well as background colors, and sometimes even gradients.

Neptune Theme

GXT 3.1 beta includes a new theme, Neptune, generated entirely with the Theme Builder. Neptune is generated entirely from its config file, with no custom HTML, CSS, images or Java.

GXT 3.1 beta includes a new theme, Neptune.

You can use Neptune as your default theme by first moving to GXT 3.1 and then adding the gxt-theme-neptune.jar to your project. The following inherits statement needs to be added to your module file:

<inherits name="com.sencha.gxt.theme.neptune.Theme"/>

GWT 2.6

When we added support for GWT 2.6, we had to break compatibility with GWT versions 2.4 and 2.5, so any project that adopts GXT 3.1 will need to also use GWT 2.6. Moving to GWT 2.6 comes with many fixes and improvements over GWT 2.5.1 that are documented in the release notes.

Documentation

With the GXT 3.1 beta release, we’ve updated our docs to include the new features like the Theme Builder, and we go into greater depth about many existing features.

Known Issues

There are a few known issues in the Theme Builder that are visible in Neptune or any other generated theme. These issues are all specific to browsers that are unable to handle modern CSS and HTML, such as IE8 and 9. TabPanel has the most obvious issues — for bottom tabpanels, the images are not aligned correctly. Dual list fields, grid row editing, and button groups do not show the same rounded corners in IE8 and 9 that you see in modern browsers. We are working on resolving some of these issues, and hope that these and other issues reported by the community will be resolved before the final release.

Feedback

Creating custom themes for GXT apps is hard work for developers. With the release of GXT 3.1 Theme Builder and Neptune theme, it becomes that much easier. We are very excited about this new feature and would like to hear about your experiences. Please give us your feedback in the Sencha GXT 3.1 Beta forum so we can improve it further before the general release.

20140226-gxt-beta-teaser.jpg 4 Comments   Read more

Expressive Presentation of Data with Sencha GXT 3 Charts

In a previous article, we provided an introduction to the Sencha GXT 3 charting library. However, there is far more to the charting library than was previously covered. This article discusses the more intermediate and advanced features that you can use — including tweaking the data store backing your chart. With some simple changes to the basic chart setup, you can make your visualizations even more explanatory and expressive.

### Store Filter

Filtering is one of the more powerful tools of the store API. Store data can be filtered without having to remove it. Here is an example of a scatter chart with a large number of points.

Filter Chart Example

It would be useful to let the user focus on a specific range of points. This can easily be done using filters.
First, be sure to enable filters on your store.

store.setEnableFilters(true);

Then, for example, you might want to display only data ranging from 0 to 50 in the first field.

store.addFilter(new StoreFilter<Data>() {
    @Override
    public boolean select(Store<Data> store, Data parent, Data item) {
    double data1 = dataAccess.data1().getValue(item);
    if (data1 < 0 || data1 > 50) {
        return false;
    } else {
        return true;
    }
    }
});

The filter chart example does similar filtering based on the values in the spinner fields. Notice the series is removed when all store items are filtered out.

### Gaps in Data

Sometimes, the problem is not an overabundance of data in your store, but a lack thereof, such as when the data you are representing has gaps in its recording. In this case, the data lacks a value, so it is best for the point not to be rendered at all. Representing no value as zero can be misleading. LineSeries and ScatterSeries provide the ability to do this.

Line Gap Chart Example

In the line gap chart example, data with gaps is simulated by storing Double.NaN every four items. Null values are also applicable for gaps in data.

for (int i = 0; i < 12; i++) {
    if (i % 4 != 0) {
    store.add(new GapData(monthsFull[i % 12], Math.random() * 100, Math.random() * 100));
    } else {
    store.add(new GapData(monthsFull[i % 12], Double.NaN, Double.NaN));
    }
}

The first series “Gapless” represents the default response where the line is still drawn over the point, but a marker is not drawn. The second series “Gapped” has the gapless flag set to false.

series2.setGapless(false);

This changes the line series to use a moveto command for the next point creating a more visible gap in the chart.

### Integration With GXT3

Another great feature of the chart store relationship is integration with other GXT data widgets. Here we have a more complex example, the dashboard example, which uses two charts in collaboration with a grid.

Dashboard Example

First, let’s take a look at the bar chart. It represents the overarching value and the price for each company. Because it uses the same store as the grid, this allows for easy cross widget selection. The following handler selects the appropriate grid item when a bar is selected.

bar.addSeriesSelectionHandler(new SeriesSelectionHandler<Data>() {
    @Override
    public void onSeriesSelection(SeriesSelectionEvent<Data> event) {
    grid.getSelectionModel().select(event.getIndex(), false);
    }
});

To the right of the grid, there are a set of widgets to display the finer details of the currently selected company. The radar chart is perfect for showing the relationship between the five properties of each company. You can do this by setting up the radar chart with a separate store that updates with the data that is currently in focus.

private void updateRadarStore(int index) {
    radarStore.clear();
    Data data = store.get(index);
    name.setValue(data.getName());
    radarStore.add(new RadarData(radarLabels[0], data.getData1()));
    price.setValue(data.getData1());
...

Also, notice the variable “price”. This is one of the spinner fields, which is used to manipulate the properties of the currently selected company. Each spinner field uses its value change event to update the store and the relevant chart.

price.addValueChangeHandler(new ValueChangeHandler<Double>() {
    @Override
    public void onValueChange(ValueChangeEvent<Double> event) {
    if (currentData != null) {
        Double value = event.getValue();
        if (value != null) {
        int storeIndex = store.indexOf(currentData);
        currentData.setData1(value);
        store.update(currentData);
        bar.drawSeries();
        bar.highlight(storeIndex);
        updateRadarStore(storeIndex);
        radarChart.redrawChart();
        }
    }
    }
});

Using the currently selected store item, it replaces the stored value and updates the store for that item. It then redraws the radar chart and the bar chart for the new data.

Now, looking at the core of the example, the grid, we see that both charts respond to changes in the grid. Because they use the same store, anything that alters the store on the grid also affects the bar chart, so sorting or filtering the grid causes the bar chart to respond in kind.

Sorted Dashboard

Also, when a grid row is selected, it saves the respective store item, highlights the appropriate bar and updates the company detail pane.

grid.getSelectionModel().addSelectionChangedHandler(new SelectionChangedHandler<Data>() {
    @Override
    public void onSelectionChanged(SelectionChangedEvent<Data> event) {
    if (event.getSelection().size() > 0) {
        int index = store.indexOf(event.getSelection().get(0));
        if (currentData != null) {
        bar.unHighlight(store.indexOf(currentData));
        currentData = null;
        }
        if (index >= 0) {
        bar.highlight(index);
        currentData = event.getSelection().get(0);
        // update radar chart
        updateRadarStore(index);
        radarChart.redrawChart();
        }
    }
    }
});

Hooking up these widgets makes for a more interactive and responsive application.

### ValueProvider

Finally, let’s take a look at an example of how to dynamically create line series beyond the initial number of value provider fields. All of the examples in this article use the property access method of generating value providers. However, that is not the only way to provide data fields to your charts. Value provider is simply an interface that allows you to get data from some other data.

Dynamic Line Example

In the dynamic line chart example, we avoid property access altogether and simply use a Map for our store items.

public class ModelItem extends HashMap<String, Double> {
    private String key;

    public ModelItem(String key) {
        this.key = key;
    }

    public String getKey() {
        return key;
    }
}

public class MapValueProvider implements ValueProvider<ModelItem, Double> {
    private String field;

    public MapValueProvider(String field) {
        this.field = field;
    }

    @Override
    public String getPath() {
        return field;
    }

    @Override
    public Double getValue(ModelItem object) {
        return object.get(field);
    }

    @Override
    public void setValue(ModelItem object, Double value) {
        object.put(field, value);
    }
}

...

ListStore<ModelItem> store = new ListStore<ModelItem>(new ModelKeyProvider<ModelItem>() {
    @Override
    public String getKey(ModelItem item) {
    return String.valueOf(item.getKey());
    }
});

This makes for a less readable but more dynamic value provider that can be created during run time; but first, the store needs to be initialized with the maps where the field data will be stored.

for (int i = 0; i < 12; i++) {
    ModelItem item = new ModelItem("item" + i);
    item.put("first", Math.random() * 100);
    store.add(item);
}

Then, let’s write a method to create a line series given an arbitrary field. Notice the new value provider is also added to the axis.

private LineSeries<ModelItem> createLine(String field) {
MapValueProvider valueProvider = new MapValueProvider(field);

LineSeries<ModelItem> series = new LineSeries<ModelItem>();
series.setYAxisPosition(Position.LEFT);
Color color = new RGB((int) (Math.random() * 255), (int) (Math.random() * 255), (int) (Math.random() * 255));
series.setStroke(color);
series.setYField(valueProvider);

Next, to make the first line using the data setup for the “first” field, we only need to call.

LineSeries<ModelItem> series = createLine("first");
chart.addSeries(series);

Now, when the user wants to add a new line in the example, we simply add new data to the maps in the store and create a new line with a value provider that accesses that data.

TextButton add = new TextButton("Add");
add.addSelectHandler(new SelectHandler() {
    @Override
    public void onSelect(SelectEvent event) {
        String field = fieldInput.getValue();
        if (field.length() > 0 && fieldStore.findModelWithKey(field) == null && fieldStore.size() < 10) {
            for (int i = 0; i < store.size(); i++) {
                ModelItem item = store.get(i);
                item.put(field, Math.random() * 100);
            }
            LineSeries<ModelItem> series = createLine(field);
            fieldStore.add(series);
            axis.addField(series.getYField());
            chart.addSeries(series);
            chart.redrawChart();
        }
    }
});

### Summary

In this article, you got to see some of the ways you can leverage the power of Sencha GXT 3 Charts to quickly and easily develop rich, informative visualizations for your web application. We’re proud of the set of tools we’ve made available as part of GXT, and we can’t wait to see the applications you build with them.

20120430-gxt3-thumb.png 5 Comments   Read more

Announcing the New Sencha Complete — Touch Charts, Designer 1.2, and a Special Promo Price!

Sencha Complete includes Ext JS 4, Sencha Touch and Sencha Touch Charts, Ext Designer 1.2, as well as Sencha Care Support

Sale Today, we’re happy to announce an all-new Sencha Complete. In addition to a commercial license of Ext JS 4, Sencha Touch, and an annual Standard or Premium Support subscription, Sencha Complete now includes a commercial license to “Sencha Touch Charts”:https://www.sencha.com/blog/sencha-touch-charts-now-available/ — our data visualization add-on to Sencha Touch — and the new Ext Designer 1.2 with support for Ext JS 4.

Purchasing Sencha Complete is a great way to get all of the desktop and mobile JavaScript frameworks and tools to help you develop amazing web applications. Plus, you’ll get the backing of our Sencha Support team and community forums with the included Standard or Premium Support subscription.

To celebrate the enhanced and expanded Sencha Complete, we’ve made the price even more attractive. Sencha Complete is now available at a special price of $845 for a 1-pack license (see our online store for 5-pack and 20-pack prices).

So go ahead and head over to the “Sencha Store”:https://www.sencha.com/store/ and find which bundle is right for you.

sencha-complete-thumb.png 23 Comments   Read more