Using Ext JS 2.2 Ajax in CF - Part 4 - Color Picker and Date Picker Controls.
One of the big reasons for using Ext JS with ColdFusion is the ability to use the widgets to improve the user interface we present to our users. Ext JS comes aith a Date picker and a Color Picker and the ColdExt tags demo has both tantalising us in its demo pages. Unfortunately the ColdExt demos don't really show us how to use them in a real application. In the most simple case we might want a form to show one of these controls and for the user to be able to submit the form with the chosen date or color value.
Lets take a look at the example code for the color palette:
<div id="progress1-out" class="output"></div>
<ext:onReady>
<ext:createChild tag="h2" renderTo="progress1-out">Color Palette</ext:createChild>
<ext:colorPalette var="myPalette" renderTo="progress1-out">
....
</ext:onReady>
Unfortnately this code does not show how we can use the code in a form. All the Ext JS controls are based on an event model. When we add a control to page with the ColdExt tags it won't do anything unless we add some Javascript to react to the events that happen to the control.
A quick look at the Ext JS 2.2 API reveals that there are a number of events that we can create listeners for.
The one that looked most interesting for me wass the select event which fires when a color is selected and passes the control and the selected color as parameters. To make use of this we can create another control to save the value which can then be submitted by the form. In this simple case I have created an Ext textField control to save the selected value. I populate it with the color value when the user clicks on a color in the palette.
So here is my new example code whit a listener, which looks for the 'select' event and updates the textField in the code below:
<div id="progress1-out" class="output"></div>
<ext:onReady>
<ext:createChild tag="h2" renderTo="progress1-out">Color Palette</ext:createChild>
<ext:colorPalette var="myPalette" renderTo="progress1-out">
<ext:listener eventName="select">
function(control,value){
Ext.getCmp("color").setValue(value);
}
</ext:listener>
</ext:colorPalette>
<ext:textField id="color" name="color" label="Color" value="" renderTo="progress1-out"/>
....
</ext:onReady>
A similar piece of code can be used for the date picker:
<ext:createChild tag="h2" renderTo="progress1-out">Date Picker</ext:createChild>
<ext:datePicker var="myDatePicker" renderTo="progress1-out">
<ext:listener eventName="select">
function(control,value){
Ext.getCmp("date").setValue(value);
}
</ext:listener>
</ext:datePicker>
<ext:textField id="date" name="date" label="Date" value="" renderTo="progress1-out"/>
</ext:onReady>
Of course, in a real example, the textField would be most likely to be inside a form tag and would not then require the renderTo attribute.
I hope this has been useful to you. If so please leave a note in the comments.
I lookup and Extjs have a field called triggerField, not sure that it this supported in ColdExt or not.