Despite looking like a typical select box, Ext.form.ComboBox doesn’t behave exactly as you would expect since it submits the display text instead of the selected option’s value. The documentation states:

A ComboBox works in a similar manner to a traditional HTML <select> field. The difference is that to submit the valueField, you must specify a hiddenName to create a hidden input field to hold the value of the valueField. The displayField is shown in the text field which is named according to the name.

this.add([
	{
		xtype: 'combo',
		name: 'suffix',
		hiddenName: 'suffixId', // post this name
		hiddenValue: 0, // default value
		fieldLabel: 'Suffix',
		mode: 'local',
		store: this.suffixStore,
		valueField: 'key',
		displayField: 'display',
		triggerAction: 'all',
		forceSelection: true,
		allowBlank: true
	}
]);

Adding a hiddenName and a default value in hiddenValue does the trick, the default value (0) is set in the hidden field until a user chooses a different value. Unfortunately this breaks when the ComboBox is set to allow blanks and the user tabs over the field. When this happens, the hiddenValue is set to a null string and the user is never prompted to select a value.

Upon form submission, the hiddenField (suffixId) will be set to neither the default nor a valid value.

One solution is to listen for the focus and blur events to reset the value of the hidden field when it has been set to a null string.

this.add([
	{
		xtype: 'combo',
		name: 'suffix',
		hiddenName: 'suffixId',
		hiddenValue: 0,
		fieldLabel: 'Suffix',
		mode: 'local',
		store: this.suffixStore,
		valueField: 'key',
		displayField: 'display',
		triggerAction: 'all',
		forceSelection: true,
		allowBlank: true,
		listeners: {
			'focus': this.handleSuffixChange,
			'blur': this.handleSuffixChange,
			scope: this
		}
	}
]);

handleSuffixChange: function(field) {
	if (field.value==='') {
		field.hiddenField.value = '0';
	}
}

Upon form submission you will be guaranteed a valid value, which is especially beneficial if you’re using the form values to populate a server side bean object.

Details about server-specific implementations already being maintained can be found here.

Ext.Direct is a new package in Ext JS 3.0 that helps alleviate many of these issues by streamlining communication between your client and server. When using Ext.Direct, you can expect to write 30% less code by eliminating common boiler plate code.

The Ext.direct namespace introduces several new classes for a close integration with the server-side. New classes have also been added to the Ext.data namespace for working with Ext.data.Stores which are backed by data from an Ext.Direct method.

Ext.Direct uses a provider architecture, where one or more providers are used to transport data to and from the server. There are several providers that exist in the core at the moment, for example a JsonProvider for simple JSON operations and a PollingProvider for repeated requests. One of the most powerful providers is the RemotingProvider.

Read the rest here.

The prolific team at DIY Themes has released the latest version of Thesis, the best theme/framework for WordPress. See what customers are saying about their Thesis experience!

This template is based on a WordPress theme by Minmin. Unfortunately the original theme doesn’t behave uniformly across multiple browsers. Don’t worry, that’s where Thesis comes in.

How Much?

It’s FREE. All I ask is that you leave the attribution link in the footer intact to link back to this site.

If you who already own Thesis, download the template (from SVN or as a zip file) and replace your custom folder with its contents. For more details see the README.txt file part of the distribution.

Don’t Know Enough About Thesis?

Learn all about it here then click “Get Thesis” to buy it today.

We are pleased to announce that Ext has partnered with CacheFly, a global content network, to provide free CDN hosting for the Ext JS framework. Cachefly’s globally distributed network and aggressive caching accelerate the delivery of web content like JavaScript and CSS, making for an even faster Ext experience.

The Ext CDN also provides the ability to create your own custom builds using Ext’s Build It! tool, and host them on the CDN. The custom builder implements features to intelligently cache your component selections, adapter, and Ext version to create a unique custom build. These custom builds are cached across sessions and used by anyone who makes the same selections as you have – allowing for caching of custom builds across applications to fully realize the benefits of the CDN.

The roadmap for version 3, due out in the first quarter of 2009, has also been updated. Here is what we can expect (I am really interested in the ones in bold):

• All new lightweight, high-speed core base library
• Flash Charting API
• Ext.Direct – Remoting and data streaming/comet support
• Integrated client-server data binding/marshaling of updates
• ListView component
• Enhanced Button and Toolbar components
• ARIA/Section 508 accessibility improvements
• CSS updates for reset style scoping and easier custom theming
• Update the Ext event registration model
• Ext.Ajax enhancements

Hands-On Ext is a fast-paced session in which we will build an Ext application in less than an hour. This session demonstrates how to get started using Ext JS and how quickly you can put together a simple application from scratch. Learn how to utilize Ext’s high-level UI widgets like GridPanel, TabPanel and FormPanel instead of re-inventing the wheel.

In this session you learn how to:

• Create an application from scratch with Ext JS
• Utilize Ext’s high-level UI widgets, such as GridPanel, TabPanel and FormPanel.

Sign up now.

The YUI library has grown to include two new components:

• Carousel
• Paginator (functionality previously released in DataTable but spun out for standalone use)

The following components have graduated from Beta to GA status:

• Cookie
• DataTable
• DataSource
• Layout Manager
• Rich Text Editor
• Resize
• Profiler