Blog

Multiple sorting and filtering on Stores

Ext 3.2 introduces multiple sorting and filtering on Ext.data.Store. Previously, it was only possible to sort or filter on a single field – now any number of filters and sorters can be added. The new multiple sorting example demonstrates this functionality in action with a grid. Click the toolbar buttons to change the sorting order, or drag the buttons to reorder them. Additional sorters can be dragged up from Column headers and dropped onto the Toolbar.

Animated DataView transitions

Ext.DataView is already a very powerful component. Backed by an Ext.data.Store, it enables you to display information to your users in a way that feels natural and intuitive. In 3.2 it just got better, with a beautiful transition animation plugin that really brings the UI to life. Items now rearrange themselves automatically, sliding around the screen and fading in and out as the store is updated.

We created two examples to demonstrate this technology – first is a DataView using the new Store multisort capability. The second example uses the updated Slider component to filter down a set of data to a user defined range.

Composite Fields

One of the layouts that has been difficult to achieve in the past is laying several fields out on the same row in a form. The new CompositeField makes this simple, and the underlying HBox layout keeps everything aligned and looking great. Check out our example and the API docs for this new component.

Using this new component couldn't be simpler:

 
new Ext.form.FormPanel({
    items: [
      {
          xtype: 'compositefield',
          fieldLabel: 'Full Name',
          items: [
              {xtype: 'textfield', name: 'title',     width: 40},
              {xtype: 'textfield', name: 'firstName', flex : 1},
              {xtype: 'textfield', name: 'lastName',  flex : 2}
          ]
      },
      //the rest of your form goes here
    ]
});
 

Slider improvements

Ext has had a Slider class for some time – it’s a great way of choosing a number along a predefined range. 3.2 introduces the ability to have any number of handles on a slider, making it easy to let users choose a range of values with a single control.

Sliders can now also participate in forms via a SliderField, adding a great alternative to NumberField for accepting numerical input on forms.

Toolbar plugins

We’re releasing two Toolbar plugins that were created for some of the new examples in 3.2. The first is a ToolbarReorderer, which allows any items inside a Toolbar to be reordered easily via drag and drop. The second is a ToolbarDroppable, which turns a the Toolbar into a DropTarget, enabling items to be easily dropped onto it and turned into buttons.

New Accessibility Theme

The Accessibility Theme is designed to be compliant with Section 508 of the Disabilities Act. It features larger font-sizes and inversed text on a dark background. Organizations aiming to support visually impaired users can now use this assistive high-contrast variant.

Quality Assurance: Unit Testing

In addition to everything mentioned above, users upgrading from 3.1 will enjoy over 180 bug fixes and enhancements at all levels of the framework. We know how important it is that things should just work, which brings me to the final announcement we’re making today.

Our internal quality assurance procedures have taken a big step forward since 3.1, starting with the addition of an automated unit testing suite. Our developers have checked in almost 300 test cases since January, testing functionality at every level of the framework. Our custom-built test environment is continuously executed against every browser and OS we support, notifying us immediately if anything goes wrong. Every new line of code that can be tested in this way will be, including new functionality and bug fixes.

It is our aim to keep Ext JS as the leading web application framework in the world. Unit testing forms a part of that ambition, and over the coming months we’ll be revealing what we’re doing to ensure that the rendering and performance of Ext are also second to none.

Download the release and let us know what you think in the comments.

Download Ext JS 3.2 beta