ExtJS ComboBox Hidden Field Issues

Mar 09

ClaudeExt JS, Tutorials , , , No Comments

As you might already know, 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 option 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 or 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.

Introduction to Ext.Direct

May 13

ClaudeArticles, Ext JS, Framework, JavaScript, Platform, Protocol , , , , , , , , , No Comments

Evan Trimboli of the Ext-JS team just published an article describing Ext.Direct, a remoting API that is part of Ext 3.0. The team has created a remoting specification that you can use to implement the server-side stack of your choice.

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.

Thesis 1.5 is Now Available

Apr 30

ClaudeFramework, WordPress , , , , , , No Comments

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!

Yahoo! Releases YUI 2.6.0

Oct 02

ClaudeFramework, JavaScript , , No Comments

YUI 2.6.0 introduces a new Carousel Control, offers the Paginator Control for general use (it was previously bundled with DataTable), includes more than 450 total fixes, enhancements and optimizations, graduates eight components out of “beta,” and now ships with more than 290 functional examples.

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

Microsoft and Nokia to use jQuery

Sep 28

ClaudeFeatured, JavaScript, jQuery , , , No Comments

This morning during the state of jQuery, John Resig announced that Nokia will be including jQuery as the framework of choice with their new equipment. And Scott Guthrie of Microsoft just made a similar announcement, Visual Studio will ship with jQuery support.