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

Nigel-SAAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ColdFusion Language

From novice to tech pro — start learning today.