ColdFusion 9 and cfgrid hack workaround

In our current Application that has been running on ColdFusion 8, we modified the cfgrid to suit our needs for our Application. This worked a treat until ColdFusion 9 was released and broke our Application that relies on the grid working the way it did in ColdFusion 8.

I was told that there was a workaround, and it was even tweeted by the product manager, but I have yet to see the workaround till today.

The first problem was a fairly easy problem to solve, but why it got broken and hasn't been fixed is beyond me. But the cfgrid will no longer except anything in the header with an apostrophe, and that also didn't help our cause much. The work around was to escape these changes before setting the header information.

The second problem is that we have images in our grid similar to the image below, now you might not think that this is much of a show stopper for us. But it was as you will see by the second image below, that took a good deal of searching to find a solution for.

I was very disappointed that there was a supposed work around and yet there was a huge lack of publicity on this fact.

Here is what our grid sort of looks like in ColdFusion 8.

cfgrid_problem1

Now the problem with this is the actual width of our columns, when you hover over the columns ColdFusion 9 doesn't behave the same way ColdFusion 8 does. As far as I am concerned this is a good example of not being backward compatible.

As you can see by the following image, how this actually ends up causing us issues. I have had to click on the image to keep the problem persistent, but imagine the column header being replaced with this every time you hover over it. And as I stated this was never a feature of ColdFusion 8, but is a new feature to the underlying extJS that is used by ColdFusion 9. Adobe should have had an option to switch this on/off and had it off by default.

But I guess this was never in their thoughts.

 

cfgrid_problem2

 

i really wish that every time I mentioned this that people would stop saying there was a work around, and just post the work around. But it doesn't excuse the fact that it does make applications break under ColdFusion 9.

Anyway the work around is as follows, this might not be the best way to do it. But it works for us, and it basically is overriding the call that runs the function in the grid to display what is in the second image.

I hope this does get fixed in ColdFusion 9, and there is an option to turn it on/off and have it off by default.

Ext.override(Ext.grid.GridView, {
          handleHdOver : function(e, t){
          var hd = this.findHeaderCell(t);
          if(hd && !this.headersDisabled){
             this.activeHd = hd;
             this.activeHdIndex = this.getCellIndex(hd);
             var fly = this.fly(hd);
             this.activeHdRegion = fly.getRegion();
             }
          }
       });