Mar 09
ClaudeExt JS, Tutorials Ext JS, Framework, JavaScript, Tutorials
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.
May 13
ClaudeArticles, Ext JS, Framework, JavaScript, Platform, Protocol .NET, ColdFusion, Ext JS, Framework, Java, JavaScript, Library, Perl, PHP, Ruby
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.
Feb 03
ClaudeExt JS Conference, Ext JS, JavaScript, Library
Ext-JS has announced their 1st Annual Ext Conference and Ext 3.0 release party on April 14 to 16, 2009 in Orlando, Florida! Join Jack and the Core Development Team for an intense 3-day conference exploring all of the new features packed into Ext 3.0. Discover best practices for building applications and connect with other members of the Ext Community. The conference provides sessions which will be of interest to all parties involved in application development including managers, designers, developers and application architects.
Dec 09
ClaudeBook, Ext JS, JavaScript Amazon, Book, Ext JS, JavaScript, Web Developement
Steve “Cutters” Blades’ book on Ext-JS is out.
By using a series of straightforward examples backed by screenshots, Learning Ext JS will help you create web applications that look good and perform beyond the expectations of your users. This book is written for Web Application Developers who are familiar with HTML but may have little to no experience with JavaScript application development. If you are starting to build a new web application, or are re-vamping an existing web application, then this book is for you.
Get your copy today.
Nov 21
ClaudeExt JS, JavaScript ColdFusion, Component, Ext JS, JavaScript, JSON, Library
Steve “Cutter” Blades has created a custom JSON Data Reader for ColdFusion, CFQueryReader. It allows Ext-JS developers to populate GridPanels using serialized ColdFusion queries in their native format or formatted for grid. CFQueryReader is designed to accommodate either format automatically.
Nov 15
ClaudeExt JS, JavaScript Earth, Ext JS, Extension, Google, JavaScript, Library
Bjørn Sandvik, a project manager at the United Nations Association of Norway has created an Ext-JS user extension for Google Earth. The code and examples are here.
Nov 11
ClaudeArticles, Ext JS, Framework, JavaScript, Presentation Ext JS, JavaScript, Library, Screencast
Jack Slocum has posted a screencast of the visual designer tool that will be part of upcoming release of Ext.
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
Older Entries
Twitter
Delicious
RSS