• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 562
  • Last Modified:

How do I convert from CFForms to EXT JS - CFGRIDS in Coldfusion

Not sure if this is asking too much.  I've used CFFORMS to update users info see attached code - using Coldfusion talking to oracle.
3 parts: users.cfm - users_process.cfm - Users.cfc
I would like to implement EXT JS into this process  - using the Row Edit Grid Example in http://www.extjs.com/deploy/dev/examples/grid/row-editor.html
This will be huge if someone can help - thanks

users.cfm
		<cfquery datasource="hp2" name="USERS">
	
				SELECT    *
				FROM      XX.MRE_USERS 
				ORDER BY LAST_NAME
	
		</cfquery>
<!--- Input fields --->
	<cfinput type="text"
			 name="USER_ID"
			 label="User ID:"
			 message="USER_ID NAME is required!"
			 required="Yes"
			 size="26"
			 maxlength="50"
			 bind="{gridUSER.dataProvider[gridUSER.selectedIndex]['USER_ID']}"
			 onChange="gridUSER.dataProvider.editField(gridUSER.selectedIndex, 'USER_ID', USER_ID.text);">
	
			 
	<cfinput type="text"
			 name="FIRST_NAME"
			 label="First name:"
			 message="FIRST_NAME is required!"
			 required="Yes"
			 size="26"
			 maxlength="15"
			 bind="{gridUSER.dataProvider[gridUSER.selectedIndex]['FIRST_NAME']}"
			 onChange="gridUSER.dataProvider.editField(gridUSER.selectedIndex, 'FIRST_NAME', FIRST_NAME.text);">
	
	
	<cfinput type="text"
			 name="LAST_NAME"
			 label="Last name:"
			 message="LAST_NAME is required!"
			 required="Yes"
			 size="26"
			 maxlength="20"
			 bind="{gridUSER.dataProvider[gridUSER.selectedIndex]['LAST_NAME']}"
			 onChange="gridUSER.dataProvider.editField(gridUSER.selectedIndex, 'LAST_NAME', LAST_NAME.text);">
			 
	<cfinput type="text"
			 name="PHONE"
			 label="Phone:"
			 message="PHONE is required!"
			 required="Yes"
			 size="26"
			 maxlength="25"
			 bind="{gridUSER.dataProvider[gridUSER.selectedIndex]['PHONE']}"
			 onChange="gridUSER.dataProvider.editField(gridUSER.selectedIndex, 'PHONE', PHONE.text);">
			 
	<cfinput type="text"
			 name="EMAIL_ADDRESS"
			 label="Email:"
			 message="EMAIL_ADDRESS is required!"
			 required="Yes"
			 size="26"
			 maxlength="75"
			 bind="{gridUSER.dataProvider[gridUSER.selectedIndex]['EMAIL_ADDRESS']}"
			 onChange="gridUSER.dataProvider.editField(gridUSER.selectedIndex, 'EMAIL_ADDRESS', EMAIL_ADDRESS.text);">
			 
	<cfinput type="text"
			 name="ROLE"
			 label="Role:"
			 message="ROLE is required!"
			 required="Yes"
			 size="26"
			 maxlength="25"
			 bind="{gridUSER.dataProvider[gridUSER.selectedIndex]['ROLE']}"
			 onChange="gridUSER.dataProvider.editField(gridUSER.selectedIndex, 'ROLE', ROLE.text);">
			 
	<cfinput type="PASSWORD"
			 name="PASSWORD"
             label="Password:"
			 message="PASSWORD is required!"
			 required="Yes"
			 size="26"
			 maxlength="15"
			 bind="{gridUSER.dataProvider[gridUSER.selectedIndex]['PASSWORD']}"
			 onChange="gridUSER.dataProvider.editField(gridUSER.selectedIndex, 'PASSWORD', PASSWORD.text);">
			 
	<cfinput type="datefield"
			 name="DATE_PASSWORD_CREATED"
			 label="Date:"
			 message="DATE_PASSWORD_CREATED is required!"
			 required="YES"
			 size="26"
			 maxlength="20"
			 bind="{gridUSER.dataProvider[gridUSER.selectedIndex]['DATE_PASSWORD_CREATED']}"
			 onChange="gridUSER.dataProvider.editField(gridUSER.selectedIndex, 'DATE_PASSWORD_CREATED', DATE_PASSWORD_CREATED.text);">
	  </cfformgroup>
	
	<cfinput name="submitButton"
			 type="submit"
			 value="Save">
	</cfform>

_________________________________________________________
users_process.cfm

<!--- Edit or update? --->
<cfif IsDefined("FORM.USER_ID")>
 <cfset method="update">
<cfelse>
 <cfset method="add">
</cfif>

<!--- Do it --->
<cfinvoke component="Users" method="#method#">
		  
 <!--- User_ID only if update method --->
  <cfif IsDefined("FORM.USER_ID")>
  
  <cfinvokeargument name="USER_ID"
                    value="#FORM.USER_ID#">
 </cfif>
				   
 <cfinvokeargument name="LAST_NAME"
                   value="#Trim(FORM.LAST_NAME)#">
				   
 <cfinvokeargument name="FIRST_NAME"
                   value="#Trim(FORM.FIRST_NAME)#">
				   
 <cfinvokeargument name="PHONE"
                   value="#Trim(FORM.PHONE)#">				   
				   
 <cfinvokeargument name="EMAIL_ADDRESS"
                   value="#Trim(FORM.EMAIL_ADDRESS)#">
				   
 <cfinvokeargument name="ROLE"
                   value="#Trim(FORM.ROLE)#">
				   
 <cfinvokeargument name="PASSWORD"
                   value="#Trim(FORM.PASSWORD)#">
				   
 <cfinvokeargument name="DATE_PASSWORD_CREATED"
                   value="#Trim(FORM.DATE_PASSWORD_CREATED)#">
				   
   
</cfinvoke>

<cfoutput>
 '"#USER_ID#"'
</cfoutput>

<!--- When done go back to Users list --->
<cflocation url="Users.cfm">

____________________________________________________________
Users.cfc

<cfcomponent hint="hp2">

 <!--- Set the datsources --->
 <cfset ds="hp2">

 
 <!--- Update a User --->
 <cffunction name="update"
             returntype="string"
             hint="Update a User">
			 
  <!--- Method arguments --->
  <cfargument name="USER_ID"
              type="string"
              required="yes"
              hint="USER_ID">
			  
  <cfargument name="LAST_NAME"
              type="string"
              required="yes"
              hint="LAST_NAME">
			  
  <cfargument name="FIRST_NAME"
              type="string"
              required="yes"
              hint="FIRST_NAME">
			  	
  <cfargument name="PHONE"
              type="string"
              required="yes"
              hint="PHONE">				  		  			  
			  
  <cfargument name="EMAIL_ADDRESS"
              type="string"
              required="yes"
              hint="EMAIL_ADDRESS">	
			  		  			  
  <cfargument name="ROLE"
              type="string"
              required="yes"
              hint="ROLE">	
			  		  			  
  <cfargument name="PASSWORD"
              type="string"
              required="yes"
              hint="PASSWORD">	
			  
  <cfargument name="DATE_PASSWORD_CREATED"
              type='date'
			  required="yes"
              hint="DATE_PASSWORD_CREATED">			  		  			  
    
 
  <!--- Update USER --->
  <cfquery datasource="#ds#">
  
  UPDATE xxx.MRE_USERS
  
  SET 
  
  USER_ID='#Trim(ARGUMENTS.USER_ID)#', 
  LAST_NAME='#Trim(ARGUMENTS.LAST_NAME)#', 
  FIRST_NAME='#Trim(ARGUMENTS.FIRST_NAME)#', 
  EMAIL_ADDRESS='#Trim(ARGUMENTS.EMAIL_ADDRESS)#', 
  PHONE='#Trim(ARGUMENTS.PHONE)#', 
  ROLE='#Trim(ARGUMENTS.ROLE)#', 
  PASSWORD='#Trim(ARGUMENTS.PASSWORD)#', 
  DATE_PASSWORD_CREATED= #CreateODBCDate(ARGUMENTS.DATE_PASSWORD_CREATED)#
  
  WHERE USER_ID= '#ARGUMENTS.USER_ID#'
  
  </cfquery>
  
  <cfreturn true>

 </cffunction>
 
</cfcomponent>

Open in new window

0
Nigel-SA
Asked:
Nigel-SA
1 Solution
 
azadisaryevCommented:
are you familiar with <cfgrid> tag?

since version 8 cf supports html grids which are based on ExtJS (ver 1.1 in CF8; ver 3.0 in CF9)

here's more info from adobe livedocs:
http://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSc3ff6d0ea77859461172e0811cbec22c24-7baf.html
[make sure to also review other grid-related tags and functions (there are linked to from the above page)]

and here are some other good resources about using cfgrid (in no particular order):
http://www.garyrgilbert.com/tutorials/coldfusion/intermediate/cfgrid.cfm
http://www.anujgakhar.com/2008/03/18/crud-with-cfgrid-html-format/
http://www.anujgakhar.com/2008/08/14/crud-with-cfgrid-html-format-part-2/
http://www.akbarsait.com/blog/index.cfm/2009/10/16/ColdFusion-9-New-Attributes-in-CFGrid
http://samfarmer.instantspot.com/blog/2009/11/11/Cool-New-cfGrid-Tricks
http://www.stillnetstudios.com/aligning-cells-in-an-html-cfgrid/
http://www.danvega.org/blog/index.cfm/2008/3/20/CFGrid-Event-Listeners
http://blog.cutterscrossing.com/index.cfm/2007/11/30/CF8-Ajax-Grid-Renderers-and-Events
http://www.coldfusionjedi.com/index.cfm/2007/8/20/Custom-grid-renderers-with-CFGRID
http://cfsilence.com/blog/client/index.cfm/2006/6/12/CFGRID-Cell-Renderer--ComboBox-Select
http://cfsilence.com/blog/client/index.cfm/2008/4/7/CFGrid-Date-Picker-Editor
http://ajaxian.com/archives/coldfusion-8-grid-magic
[just googling for cfgrid will return these and a lot of other results]

plus there are quiet a few answered questions about various aspects of <cfgrid> here on EE - just search...

Azadi
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now