Blog

Technically, while the individual Checkbox and Radio controls are not new, they may as well be, considering the overhaul they have had in this release. Gone are the ugly standard browser input controls, now replaced by attractive, visually-consistent Ext-ified versions (a long-overdue improvement). In addition to that, we've added group controls for both that support complex layouts with just a config option or two. This was inspired, in part, by the RadioGroup user extension created by community member vtswingkid. Previously in order to accomplish similar grouping layouts for checkbox/radio controls you would have had to create a container with a ColumnLayout and manually place your controls across multiple column configs. Now you can do something as simple as...

 
	... },{
	    xtype: 'checkboxgroup',
	    fieldLabel: 'Multi-Column (horizontal)',
	    columns: 3,
	    items: [
	        {boxLabel: 'Item 1', name: 'cb-horiz-1'},
	        {boxLabel: 'Item 2', name: 'cb-horiz-2', checked: true},
	        {boxLabel: 'Item 3', name: 'cb-horiz-3'},
	        {boxLabel: 'Item 4', name: 'cb-horiz-4'},
	        {boxLabel: 'Item 5', name: 'cb-horiz-5'}
	    ]
	},{ ...
 

Check out the live example.

Another component that has been missing in Ext is a browser history utility to enable history stack navigation within your single-page Ext application. The new Ext.History singleton makes it extremely easy to do exactly that, and it uses an event-based API to notify you when the browser history has changed. Check out the live example.

These two components were contributed to Ext by community member TJ Stuart (thanks TJ). The MultiSelect is a traditional list control that allows for selecting multiple list items, and the ItemSelector combines two MultiSelects into a more sophisticated control that includes drag-and-drop list selection and bulk selection and deselection among other features. Check out the live example. For the time being these controls are still implemented as user extensions, and the MultiSelect will likely be migrated to become a core component in a future release. They should not yet be considered to be API-stable controls, but should still be quite useful if you need the functionality.

This is an official extension provided as a sample for implementing a useful form component. Not everyone needs a form upload component, but if you do, you can't live without it. This control is fully styled and has an API consistent with other Ext form controls. It also supports both Text+Button (read-only text) and Button-only modes, and can participate fully in form layouts. Check out the live example.

This official extension provides a great demonstration of extending an existing Ext component to provide functionality that you need in your own application. Again, loading an XML document into a tree is not needed by everyone, but if you do need something similar, this should be a great demo. Check out the live example.

This extension was originally written up as a demo for one of our previous blog posts. However, it proved to be such a hit with the community that we transformed it into an official extension. This is another useful example of extending a standard Ext component, in this case to interface with an external API. Check out the live example.

Firefox 3 is a fantastic upgrade from version 2 (especially on Mac — I'm looking at you, scrollbars!). Ext performance out of the box on Firefox 3 is far better than it was before. However, the negative is that the new version also introduced a handful of bugs that have been addressed in this Ext release. Most notably:

• Grid columns were visually misaligned
• Ext.onReady stopped working reliably (our desktop demo stopped initializing correctly)
• The DatePicker width ran off the screen, making the control unusable
• The TabPanel contextmenu event stopped firing, killing the TabCloseMenu extension
• Window dragging stopped working correctly
• Various minor visual inconsistencies

If any of these issues sounds familiar, then Ext 2.2 is for you!

There are 3 new advanced drag-and-drop examples available in the Ext distribution, authored by community members Animal and JGarcia (thanks guys). These examples demonstrate:

• How to implement the Ext.DragZone/DropZone classes in the context of a business-style application (live demo)
• Dragging and dropping records from one grid to another (live demo)
• Dragging records from a grid and dropping them onto a form to populate the form's fields (live demo)