setRenderer Question

Report · Feb 02, 2011

Hi,

I am able to use the following:

cm.setRenderer(2, Ext.util.Format.usMoney);

or I can use:

cm.setRenderer(2,myf);

QUESTION: How do I use them together? One is formatting the column into usMoney format, the other is completing a comparison and if "true", coloring a column. I need both to work. Thoughts?

Report · Feb 03, 2011

I'm intrigued.

The CF docs don't know about the setRenderer method. What is this cm object you're calling it on?

--

Adam

Report · Feb 04, 2011

Hi Adam,

I'm working within cfgrid and cfgridcolumn. I'm working in the Ext platform to perform some functions that don't exist in cfgridcolumn. The myf function is comparing two column's values and if they're the same, I'm highlighting one of them. In this case I'm highlighting text color, but it's also good for background color. The other scenario is that I'm formating for money/currency.

If you look in the first column, 0, you can see that I've formatted for usMoney. In the second column, 1, you can see that I'm color coding on value comparisons. I've commented out the usMoney on the second column. That's what I'm trying to get to, both usMoney and the comparison.

<cfajaximport/>
<html>

<head>
<script>

myf = function(data,cellmd,record,row,col,store) {
           if(record.data.TODAYCLOSE == record.data.FIFTYFIVEMAX) return "<b style='color:red'>" + data + "</b>";
          else return data;
}
testgrid = function() {
      mygrid = ColdFusion.Grid.getGridObject('data');
      cm = mygrid.getColumnModel();
      cm.setRenderer(0, Ext.util.Format.usMoney);
      //cm.setRenderer(1, Ext.util.Format.usMoney);
      cm.setRenderer(1,myf);
      mygrid.reconfigure(mygrid.getStore(),cm);
}
</script>
</head>

<body>

<cfset data = queryNew("todayclose,fiftyfivemax") />
<cfset queryAddRow(data) />
<cfset querySetCell(data, "todayclose", 130.00, 1) />
<cfset querySetCell(data, "fiftyfivemax", 130.00, 1) />
<cfset queryAddRow(data) />
<cfset querySetCell(data, "todayclose", 135.00, 2) />
<cfset querySetCell(data, "fiftyfivemax", 132.00, 2) />

<cfform name="test">
<cfgrid autowidth="true" name="data" format="html" query="data" width="600">
      <cfgridcolumn name="todayclose" header="Close">
    <cfgridcolumn name="fiftyfivemax" header="55 Day Max">
</cfgrid>
</cfform>

<cfset ajaxOnLoad("testgrid")>

</body>
</html>

Thoughts?

Report · Feb 05, 2011

Right, so this is a Ext JS question, rather than a CF question then? This is perhaps not the best place to ask it: you'd probably be more likely to get informed help on an Ext JS forum (I presume there are such things?)

Still, reading the docs of setRenderer(), the second argument is just a function... so can't you just write a function that does both things you want?

Ext JS docs:

http://dev.sencha.com/deploy/dev/docs/

Specifically for ColumnModel:

http://dev.sencha.com/deploy/dev/docs/output/Ext.grid.ColumnModel.html

And the source code for the usMoney formatter (so an example of how to write your own renderer):

http://dev.sencha.com/deploy/dev/docs/source/Format.html#method-Ext.util.Format-usMoney

--

Adam

Report · Feb 06, 2011

cfwild wrote:
Hi,
I am able to use the following:
cm.setRenderer(2, Ext.util.Format.usMoney);
or I can use:

cm.setRenderer(2,myf);
QUESTION: How do I use them together? One is formatting the column into usMoney format, the other is completing a comparison and if "true", coloring a column. I need both to work. Thoughts?

You shouldn't use them together. A well-known rule-of-thumb in software design is that you should ideally let a function do just one thing.

Report · Feb 07, 2011

Thanks for the help on this one. The answer was right in front of me. I simply incorporated the two into one function. For anyone interested, code is below:

*The change is in myf, instead of returning data, I'm returning the formatted data: Ext.util.Format.usMoney(data).

<head>
<script>

myf = function(data,cellmd,record,row,col,store) {
           if(record.data.TODAYCLOSE == record.data.FIFTYFIVEMAX) return "<b style='color:red'>" + Ext.util.Format.usMoney(data) + "</b>";
          else return Ext.util.Format.usMoney(data);

}
testgrid = function() {
      mygrid = ColdFusion.Grid.getGridObject('data');
      cm = mygrid.getColumnModel();
      cm.setRenderer(0, Ext.util.Format.usMoney);
      //cm.setRenderer(1, Ext.util.Format.usMoney);
      cm.setRenderer(1,myf);
      mygrid.reconfigure(mygrid.getStore(),cm);
}
</script>
</head>

<body>

<cfset data = queryNew("todayclose,fiftyfivemax") />
<cfset queryAddRow(data) />
<cfset querySetCell(data, "todayclose", 130.00, 1) />
<cfset querySetCell(data, "fiftyfivemax", 130.00, 1) />
<cfset queryAddRow(data) />
<cfset querySetCell(data, "todayclose", 135.00, 2) />
<cfset querySetCell(data, "fiftyfivemax", 132.00, 2) />

Adobe Community

setRenderer Question

1 Correct answer