Objective Action - Ext JS

Using Ext JS 2.2 Ajax in CF - Part 4 - Color Picker and Date Picker Controls.

Fri, 26 Dec 2008 16:18:00+0100

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:





  
   
	Color Palette  
	  
....

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:






	Color Palette
	
		
			function(control,value){
				Ext.getCmp("color").setValue(value);
			}
		
	

	

....

A similar piece of code can be used for the date picker:



	Date Picker
	
		
			function(control,value){
				Ext.getCmp("date").setValue(value);
			}

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.

Using Ext JS 2.2 Ajax in CF - Part 3 - Adding new rows to the grid.

Wed, 24 Dec 2008 16:49:00+0100

Welcome to my third visit into the world of Ext JS and the ColdExt tag library. To put this post in context I have included a picture of my final grid control at the top of the page. When I began trying to use the Ext Grid Control to edit records, one of the first problems I had to solve was how to add additional rows. I asked the question on the ColdExt forum but got no answer. Luckilly there were lots of people who had solved the problem on the Ext JS forums before me. It took me a while to translate the Ext JS solutions into one based on ColdExt, but here is what I came up with. Several of the Ext JS widgets make use of the Ext.Data.Store this is a general purpose way to store data on the client and can keep trach of changes in the background leaving the control to get on with the display and presentation of the data. The Store also provides ways to transfer the data to and from the server. One particular version of the store is JsonStore which provides a way to read and populate the store from Json data which is easy to create with ColdFusion. In the ColdExt examples Justin Carter has used a Json library by Jehiah Czebotar and Thomas Messier to create the Json which is used to load the store. In his notes Justin says this is "for compatibility". I know CF8 will create Json directly so I am not sure where the compatibility issue lies. It could be done to allow CF7 users to make use of the ColdExt tags or it could be because of some difference between the way CF8 creates Json and what is needed by the Ext Js widgets. Maybe someone who knows will comment. So the first set in using the Grid as an editor is to create a suitable data store. Here is my code for that:

The url parameter on the JsonStore tag links to my ColdFusion template that creates the Json data. I have created fields for each of the columns I display in the grid and I also created a couple of extra param tags which I use to keep track of which row is selcted and a list of the rows which have been deleted. The limit param is used to drive the paging toolbar which allows the user to page through a large dataset a few rows at a time without having to download all the rows to the client. So our goal is to create a new record and display it in the grid, where the user can update it with their own data. In order to do that all that is needed is to add the new record to the store. Ext JS will take care of the rest. To add a new record we need to first create a record template:



	// Create a record type to allow new ones to be created.
	var ObjectType = Ext.data.Record.create([
		{name: 'objecttypeid', type: 'number'},
		{name: 'groupid', type: 'number'},
		{name: 'visibilityid', type: 'number'},
		{name: 'managementid', type: 'number'},
		{name: 'title', type: 'string'},
		{name: 'description', type: 'string'},
		{name: 'allowmultiple', type: 'bool'},
		{name: 'groupmayown', type: 'bool'},
		{name: 'membermayown', type: 'bool'},
		{name: 'membermayedit', type: 'bool'}
		
	]);

When we have a tempate for a record we can create one:

	
	// Create a new empty record.
	var newRec = new ObjectType({
		objecttypeid: 0,
		groupid: #attributes.grou_select#,
		visibilityid: 5,
		managementid: 5,
		title: '',
		description: '',
		allowmultiple: true,
		groupmayown: false,
		membermayown: true,
		membermayedit: true
	});

Finally we add the record to the store:


	// Turn editing off and add the record.
	myGrid.stopEditing();
	myGrid.getStore().insert(0, newRec);
	myGrid.startEditing(0, 0);

In order to use the above code in a coldExt control we simply have to specify it as the handler for the button on the toolbar. We wrap the handler code in a pair of handler tags.

Finally we link the code to the button on the toolbar:

Well I hope that is some use to someone. Please let me know if it helps you.

Using Ext JS 2.2 Ajax in CF - Part 2 - Combo boxes in the grid.

Fri, 19 Dec 2008 10:07:00+0100

The real reason I started looking at Ext was my frustration with the Ext based grid control in ColdFusion 8. As I mentioned in the previous post, I have never had much sucess with the <cfgrid> tag. It seems to offer so much but deliver so little. When it comes down to the final page its always gone in favour of somthing much more clunky but which actually works. Flush with my sucess with combo boxes in an Ext form. I was convinced that I could move on to the real goal. The Ext Grid control. This seemed to offer everything I wanted. The examples showed all the needed features and with the support of the ColdExt tags I showed no fear. Well I was soon caught out by the same issue that got me earlier. How to make the combo box do what a select list does. The Ext grid has the same problem with combo boxes as regular forms. However I could not see how to make use of my earlier fix, the use of a hidden field. There were a number of postings on the Ext Forums, with various solutions, none of which appeared to work for me. I decided to pick a forum posting by nkohari and worry it until I got somewhere. At first it seemed completly incompatible with the ColdExt tags, so I began with using the Javascript and not using any ColdExt tags. What was missing from that posting took a little time to discover.


var store = new Ext.data.SimpleStore({
  fields: [ "value", "text" ],
  data: [
    [ "value1", "Option 1" ],
    [ "value2", "Option 2" ],
    ...
  ]
});

var combo = new Ext.form.ComboBox({
  store: store,
  valueField: "value",
  displayField: "text",
  ...
});

Its all in the ... that nkohari adds to the parameters. After a little worrying and changing things I had a working drop down but it was trying to get somthing remotely when all the data was local. Further investigation revealed that the ColdExt tags add mode: "local" where the ... is in the combo definition. Added that and it all worked! When I looked at the final code I began to realise that there was a way to make most of it work using ColdExt tags. The main issue is that the renderer has to have a combo box passed to it as a parameter so you have to define your combo boxes before you build the grid rather than inside the grid as normal. So my final solution uses the script from nkohari to build the renderer and the rest is done with ColdExt:



	
	
		Ext.namespace("Ext.ux");
		Ext.ux.comboBoxRenderer = function(combo) {
		  return function(value) {
		    var idx = combo.store.find(combo.valueField, value);
		    var rec = combo.store.getAt(idx);
		    return rec.get(combo.displayField);
		  };
		}
	
	
	
		#qManagement.mana_title#

Inside the grid we simply use the predefined combo box and our renderer.

I hope that helps someone else use the Ext Grid without the hassle I had. Please let me know if it helps you.

Using Ext JS 2.2 Ajax in CF - Part 1 - Coldext plus Combo box Id and Value

Wed, 17 Dec 2008 13:21:00+0100

Over the last couple of weeks I have been playing with a new Ajax library. New? Well its been around a while but it is new to me. The reason for my interest was the frustration I had with using the grid in ColdFusion. The cfgrid tag is very appealing but every time I tried to use it, something I needed did not work quite well enough or quite the way I wanted in order to make it suitable for the application. It has always been very frustrating. The latest CF8 implementation is no better. I realised that the thing I was working on would be best done with some kind of grid. I started with a cfgrid tag and soon realised that my idea would not quite work. Then I remembered that the latest CF8 HTML grid uses Ext 1.0 as its underlying engine. I took a quick look at the Ext web site and the grid demo. When I tried the samples I saw immediately that the latest version of Ext would do what I needed. Basicly I wanted to be able to easily page through a number of records and the examples had a way of adding a paging toolbar and a toolbar with icons for save and refresh and so on. The only problem for me was that my exiting application code was using some other ColdFusion features that were based on Ext. I realised that using two different versions of Ext together would impossible so I had to replace all the existing easy to use CF tab based stuff with Ext code which is based on Javascript. It was do-able but not vey nice. Luckily before I began the job I thought to check RIAforge and found that Justin Carter had created a series of CF custom tags to support the Ext 2.2 libary. Basicly each tag exacly mimics the JS call so that you can write a CF tag instead of the JS code. For me this made the conversion much easier. No need to reformat everything just change some of the tags to call Justin's tags and it worked! A big thank you to Justin for the tag library. Since then I have come across some issues with the way Ext JS things work and found work arounds. Some of them are not quite sraightforward, I decided to document my solutions so that anyone else who wants can avoid going through the hassle. So here is my first contribution....

Combo box Id and Value

At first sight the Ext JS combo box seems to be exacly like an HTML select. There is a dropdown list, you can choose somthing from the list and it gets displayed. Simple? Wrong! The combo box is actually a more complex control and although it can look a bit like a select it is actually a completely new beast to those who have grown up using HTML. In the default mode the combo box does one major thing that the select does not and that is it allows you to type a new thing into the box that is not just one of the items in the drop down. This is the key to the reson why it does not work like a select control. While the select control allows you to choose a value and returns the id associated with that value the combo can't quite do that. Because you can type somthing it has to return what is displayed. After all it might just be something not actually in the dropdown list. You can set the contol so that it does not allow typing by setting a parameter, (editable="false"), but that won't make the control return the id rather than the value. On the Ext Js web site there are some complex solutions offered with cuson renderers for the combo box, but somehow they don't feel easy to implement. What I decided to do was to create a hidden control and use that for the id. When someone updates the choice, a change event can be used to update the hidden contol. Here is an example written using the coldext tags.




	#qMarketing.sour_title#
	
	
				function(control,newValue,oldvalue){
			Ext.getCmp("naxg_marketing").setValue(newValue);
				}

I hope you find it useful. Please let me know if you do.