5 Replies Latest reply on Feb 7, 2011 7:57 PM by cfwild

    setRenderer Question

    cfwild Level 1

      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?

       

      <cfwild />

        • 1. Re: setRenderer Question
          Adam Cameron. Level 5

          I'm intrigued.

           

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

           

          --

          Adam

          • 2. Re: setRenderer Question
            cfwild Level 1

            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?

             

            <cfwild />

            • 3. Re: setRenderer Question
              Adam Cameron. Level 5

              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

              • 4. Re: setRenderer Question
                BKBK Adobe Community Professional & MVP

                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.

                • 5. Re: setRenderer Question
                  cfwild Level 1

                  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).

                   

                  <cfajaximport/>
                  <html>

                   

                  <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) />

                   

                    <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>