CFGrid Date Picker Editor

A few weeks ago Dan Vega blogged about creating a comboxbox (drop down) cell editor for the editable <cfgrid> before he realized that cfgrid supports in cell drop downs. I commented that I'd like to see something like a date picker cell editor and after using Dan's orginal code as inspiration and some hints from this post by Scott Bennett I finally got the thing working. Yes, I do realize that sometimes it'd just be easier to roll your own Ajax widget from scratch, but sometimes hacking it is more fun.

I'll leave it to Dan and Scott's original posts to explain the details, but here is what you'll end up with:

And here's the code:

<cfsetting showdebugoutput="false">

<cfajaximport tags="cfinput-datefield" />

<html>
<head>
<title>Edit Artist Grid</title>
<link href="/CFIDE/scripts/ajax/ext/resources/css/ytheme-aero.css" rel="stylesheet" type="text/css">

<style>
.x-menu-list{
margin: 0px; padding: 0px;
}
</style>

<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/ext-all.js"></script>

<script type="text/javascript">
function init(){
//grid object
grid = ColdFusion.Grid.getGridObject("ArtistGrid");

//column model
cm = grid.getColumnModel();

//we need to know the column id
stIndex = cm.findColumnIndex("LASTMODIFIED");

var df = new Ext.grid.GridEditor(
   new Ext.form.DateField(
      {
         format: 'm/d/Y',
         minValue: '04/01/08',
      }
   )
);


cm.setEditor(stIndex, df);
cm.setRenderer(stIndex, Ext.util.Format.dateRenderer('m/d/Y'));

grid.reconfigure(grid.getDataSource(),cm);
}
</script>
</head>

<body>



<cfquery name="getArtists" datasource="cfartgallery">
SELECT artistId, firstname, lastname, address, city, state,
postalcode, email, '04/01/2008' as lastModified
FROM Artists
</cfquery>

<cfset args = structNew()>
<cfset args.name = "ArtistGrid">

<cfset args.format = "html">
<cfset args.query = "getArtists">
<cfset args.stripeRows = true>
<cfset args.selectColor = "##D9E8FB">
<cfset args.selectmode = "edit">
<cfset args.onchange = "cfc:artists.editArtist({cfgridaction},{cfgridrow},{cfgridchanged})">

<cfform>
<cfgrid attributeCollection="#args#">
<cfgridcolumn name="artistid" display="false">
<cfgridcolumn name="firstname" header="First Name">
<cfgridcolumn name="lastname" header="Last Name">
<cfgridcolumn name="address" header="Address">
<cfgridcolumn name="city" header="City">
<cfgridcolumn name="state" header="State">
<cfgridcolumn name="postalcode" header="Zip">
<cfgridcolumn name="lastModified" header="Last Modified">
</cfgrid>
</cfform>

<cfset ajaxOnLoad("init")>
</body>
</html>

Adding A Minimize Button To Your CFWindow

Here's a quick example of how to add a functional minimize button to your CFWindow.

<script>
createWin = function(){
ColdFusion.Window.create('Window1', 'This is a CF window','win.cfm',{x:100,y:100,height:300,width:400,modal:false,closable:true,collapsible:true,draggable:true,resizable:true,center:true,initshow:true})
//get the Ext window object
var w = ColdFusion.Window.getWindowObject('Window1');
//add the class for the collapse button
w.collapseBtn = w.toolbox.createChild({cls:"x-dlg-collapse"});
//add a listener for the collapse click
w.collapseBtn.on("click", w.collapseClick, w);
//add the class to swap the image on mouse over
w.collapseBtn.addClassOnOver("x-dlg-collapse-over");
}

</script>

<cfset ajaxOnLoad('createWin') />

Demo

Thoughts On Ajax Frameworks And ColdFusion/Adobe

A reader (ironically named Todd) commented on my post yesterday:

I'd also like to see some discussion about Ext vs. Spry.

Dreamweaver CS3 seems to have settled on Spry while CF8 has settled on Ext (1.0). Apparently, Adobe divisions do not talk to each other.

I can't decide between them. I find Ext (at least teh 1.0 version used in CF) to be difficult and frustrating to use. Prototype.js was easy. I haven't yet tried Spry.

[More]

Extending Ext With Ext Extensions

I was just browsing the Ext Extensions labs and I have to say I'm quite impressed. Some of these things are not quite ready for prime time, but will be very useful when they are finally released. Of particular interest to me are the FileTree Widget (check out that right click (context) menu!) and the Upload Form.

Applying Effects To CF Ajax Controls Revisited

Almost a month ago I blogged about using Spry effects on a cfwindow. While it was a cool proof of concept, it left a bit to be desired in my opinion. First off there was no fade out effect - just a fade in. Secondly the thing really didn't work quite as expected in IE - go figure. I've been trying to get some time here and there to revisit the topic and finally have a solution that I'm pretty happy with.

[More]

cfunited08

cfunited08

Calendar

Sun Mon Tue Wed Thu Fri Sat
    123
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

Subscribe

Enter your email address to subscribe to this blog.

Tags

actionscript ajax blogging cfsnippets coldfusion flash forms flex misc model-glue off topic personal project learn sql

Recent Comments

Hosting Advice Needed
todd sharp said: Must have been on a box that I'm not on. Thank goodness too, because all of my sites (this blog, cf... [More]

Hosting Advice Needed
Oğuz Demirkapı said: No. And the tickets are still open in support system. :) I think they had a big outage and still ... [More]

Hosting Advice Needed
todd sharp said: Did they say what caused such a long outage? [More]

Hosting Advice Needed
Oğuz Demirkapı said: VPS is back after 13 hours. :) [More]

Hosting Advice Needed
Oğuz Demirkapı said: 12 hours now since the server is down. :( [More]

RSS


coldfusionbloggers

FullAsAGoog MXNA

Consumed By Feed-Squirrel.com