I had been recently building a cfgrid with html format in my company’s ColdFusion application when I encountered a problem. For those not familiar, the cfgrid html format uses the ExtJS API. The intent of this blog entry is to describe a bug fix, but look here for more information on how to use cfgrid or for ExtJS. My problem occurred while using my Internet Explorer browser to do an inline edit in the cfgrid. The edited field had the red marker in the corner, but the whole cell turned white, making it appear blank.

After playing around with the code without success, I devoted some time to surfing for answers. , It turns out that the problem is a CSS rendering issue with IE and erroneous code in an ExtJS CSS file. One of the ExtJS CSS files has improper comments in a few of the classes and IE does not recognize the comments. Instead, IE turns fonts and background colors white. I came upon the solution on Ray Camden’s site in pieces throughout the comments and am consolidating it here.

To correct this problem, you need to replace the ‘//’ comments with the proper ‘/*’ comments in the ext-all.css file, usually found in \CFIDE\scripts\ajax\resources\ext\css directory. About midway down the CSS file, you will find the erroneous comments. Remove those ‘//’ and replace with ‘/*’ as follows:

.x-grid-row-selected td, .x-grid-locked .x-grid-row-selected td{

      /*color: white;*/

}

.x-grid-row-selected div, .x-grid-row-selected div, .x-grid-row-selected b, .x-grid-row-selected strong, .x-grid-row-selected i{

      /* color: white !important;*/

}

.x-grid-row-selected .x-grid-cell-text{

      /*color: white;*/

}

.x-grid-cell-selected{

      background-color: #316ac5 !important;

      /*color: white;*/

}

.x-grid-cell-selected span{

      /*color: white !important;*/

}

.x-grid-cell-selected .x-grid-cell-text{

      /* color: white;*/

}

After making the corrections, save the file, refresh your browser and you will now see your text changes in the cell. One thing to note, however, is that all of the text in the highlighted rows, as well as the edits, will remain black now instead of white. I was unable to change the CSS without major effort to keep the text white when a row is selected, but have it turn black when a cell is edited; for me the simpler solution was to use a lighter select color.