Page 1 of 5 123 ... LastLast
Results 1 to 10 of 45

Thread: Example FormPanel using JSON to load and submit with Coldfusion or PHP

  1. #1
    Sencha User murrah's Avatar
    Join Date
    Oct 2007
    Location
    Katoomba, Blue Mountains, west of Sydney, Australia
    Posts
    400
    Vote Rating
    15
      0  

    Default Example FormPanel using JSON to load and submit with Coldfusion or PHP

    Hi,

    One of the most common actions in web/database work is to load a specific record into a form, allow the user to edit it and then save the changes back to the server. There wasnt an Ext 2.0 example of this so I have written one.

    This is an example FormPanel that uses JSON to load and submit records from/to the server. I have provided both Coldfusion and PHP server-side scripts.

    The example is built on the XML example provided as part of the Ext package.

    There is a simple version that does pretty much what the XML version does.

    The more complex example adds a few fields, has a bit more client side validation and (more importantly) is as robust as I can make it regarding error handling for the load and submit. There is a big comment in the json-form.js file about this.

    The more complex example also allows you to specify a record ID to load to simulate how your code might load a specific record from a database for editing. The server-side scripts dont actually use a database - there are 2 hard coded records (recordID 1 and 2). Any other recordID will return a "Record not found" message.

    Thanks to tryanDLS and hendricd for their help in getting ths example working.

    If anyone wants to do some server-side scripts for other environments (asp?) please send them to me and I will add them to the package.

    If anyone has any suggestion please let me know via this forum. I am fairly new to Ext so there might be better ways to do what I have done.

    To install the example, unzip the attached file and read the readme.txt file.

    [EDIT December 28th, 2008] Updated the example file to work with Ext 2.2 and fixed a couple of other minor things. See post #24 for more details
    [EDIT January 19th, 2009] Added the missing README.TXT file
    [EDIT January 28th, 2009] Added ASP samples - thanks to user mikepeat


    [EDIT January 3rd, 2011] This is now a long way out of date. ExtJS architecture has changed a lot and this post is probably irrelevant now.
    Cheers,
    Murray
    Attached Files Attached Files

  2. #2
    Ext User
    Join Date
    Oct 2007
    Posts
    37
    Vote Rating
    0
      0  

    Default

    good work

  3. #3
    Ext User
    Join Date
    Aug 2007
    Posts
    36
    Vote Rating
    0
      0  

    Default Working database live connection (ColdFusion Version)

    If any of you are like I was I needed to go a few steps further than the very fine post and example above. I can put data into the database just fine by doing a traditional form submit via EXTjs, but to load the form from a live database took some doing.

    I picked through the forum posts and found enough pieces to finally ask the right question.

    Below is the json-form-getjson.cfm I modified to connect to our oracle database. I hope it is enough for you to figure out how to connect to your style of DBMS.
    Code:
    <cfsetting showdebugoutput="no"> <!--- To supress any debugging code that will upset the json return --->
    
    <!---<cfinclude template="json.cfc" />---> <!---cfJSON file--->
    
    <cfinclude template= "../cflibJSON/cflibJSON.cfm"> <!---jsonencode/jsondecode/isJSON from cflib.org--->
    <cfquery datasource="contacts" name="getContacts">
      SELECT id
           , first
           , last
           , company
           , email
           , state
           , dob
        FROM contact_info 
        where id = #url.recordID#
    </cfquery> 
    
    
    <cfscript>
    	thestruct = StructNew(); 
    	thestruct['success'] = StructNew(); 
    	thestruct['success'] = true; 
    	thestruct['data'] = StructNew();
    	thestruct['data']['recordid'] = getContacts.id;
    	thestruct['data']['first'] = getContacts.first;
    	thestruct['data']['last'] = getContacts.last;
    	thestruct['data']['company'] = Replace(getContacts.company, chr(13) & chr(10), ' ','ALL');
    	thestruct['data']['email'] = Replace(getContacts.email, chr(13) & chr(10), ' ','ALL');
    	thestruct['data']['state'] = getContacts.state;
    	thestruct['data']['dob'] = dateFormat(getContacts.dob, "mm/dd/yyyy");
    </cfscript>
    <cfinvoke component="JSON" method="encode" data="#thestruct#" returnvariable="result" />
    
    <!---<cfset result1 = "{data:{recordid:'1', first:'Jack', last:'Slocum', company:'Ext JS', email:'support@extjs.com', state:'OH', dob:'04/15/2007', fee:'50'}, success: true }">--->
    <CFCONTENT
    TYPE="text/plain"
    RESET="Yes"><cfoutput>#jsonencode(thestruct)#</cfoutput>
    <!---<cfoutput>#jsonencode(thestruct)#</cfoutput>--->
    <!---<cfoutput>#result#</cfoutput>--->
    <!---<cfoutput>#result1#</cfoutput>--->
    You will notice there is a hard-coded string in place for testing purposes. I used two different JSON encoders during my trials to see if they had any different output, when I was trying to get it to work, so I left them in so you can use the one you want to.

    The Key to this thing working is the layout of the struct . I used the thread at: http://extjs.com/forum/showthread.php?t=3458
    as my starting point to get this to work. The thread is talking about a grid but hay it's input from a database isn't it?

    The grid needed an array of data elements and this form only needs one row from the database at a time. My main problem was not understanding the struct well enough to layout the struct so the output looked like the hard-coded JSON from the first post of this thread. Thanks to Core Developer Aaron Conran I was able to make a working example.

    Below is the sql for the table I created to help you with putting your own version of this example together

    Code:
    create table CONTACT_INFO
    (
      ID      NUMBER(1),
      FIRST   VARCHAR2(20),
      LAST    VARCHAR2(20),
      COMPANY VARCHAR2(50),
      EMAIL   VARCHAR2(50),
      STATE   VARCHAR2(3),
      DOB     DATE
    );
    
    
    insert into CONTACT_INFO (ID, FIRST, LAST, COMPANY, EMAIL, STATE, DOB)
    values (1, 'Jack1', 'Sloc1um', 'Ext JS', 'support@extjs.com', 'OH', to_date('20-09-2006', 'dd-mm-yyyy'));
    insert into CONTACT_INFO (ID, FIRST, LAST, COMPANY, EMAIL, STATE, DOB)
    values (2, 'Murray', 'Hopkins', 'Murrah', 'murray@murrah.com.au', 'NSW', to_date('26-04-2002', 'dd-mm-yyyy'));
    commit;
    Last edited by kstevens; 13 Dec 2007 at 6:36 AM. Reason: changed decode to encode

  4. #4
    Sencha User murrah's Avatar
    Join Date
    Oct 2007
    Location
    Katoomba, Blue Mountains, west of Sydney, Australia
    Posts
    400
    Vote Rating
    15
      0  

    Default

    Thanks for that.

    Prompted by your reply I have started a new post around using Coldfusion to get Ext formatted json so we dont bury that vital info in this post.

    See: http://extjs.com/forum/showthread.php?t=20790
    for another way to use CF and Ext.

    Cheers,
    Murray

  5. #5
    Ext User
    Join Date
    Dec 2007
    Posts
    1
    Vote Rating
    0
      0  

    Default Thanks Murray

    This is what i want.

    Thanks

  6. #6
    Sencha User murrah's Avatar
    Join Date
    Oct 2007
    Location
    Katoomba, Blue Mountains, west of Sydney, Australia
    Posts
    400
    Vote Rating
    15
      0  

    Default

    Glad it was useful.

    Cheers,
    Murray

  7. #7
    Ext User
    Join Date
    Oct 2007
    Posts
    32
    Vote Rating
    0
      0  

    Default

    Very useful!!!

    Thank's

    Stefano

  8. #8
    Sencha User murrah's Avatar
    Join Date
    Oct 2007
    Location
    Katoomba, Blue Mountains, west of Sydney, Australia
    Posts
    400
    Vote Rating
    15
      0  

    Default

    Thanks Stephano.

  9. #9
    Ext User
    Join Date
    Jun 2007
    Posts
    187
    Vote Rating
    1
      0  

    Thumbs up

    Nice tutorial, thanks for it.
    Is there a way to process the loaded data (I understand that the form has its own reader so I guess it has its own store?) as soon as this is reloaded?
    Something like....fs.store.on('load', function(){...} ?
    Using another words, how can I get access to the loaded data directy, before the form fields are populated?
    Thanks

  10. #10
    Sencha User murrah's Avatar
    Join Date
    Oct 2007
    Location
    Katoomba, Blue Mountains, west of Sydney, Australia
    Posts
    400
    Vote Rating
    15
      0  

    Default

    Thanks for the thanks.

    I havent tried to do what you are asking and I imagine it could work but obviously will depend on what you want to do in between loading and rendering.

    What are you trying to acheive?

    I am also using the code at this post and found it really useful: http://extjs.com/forum/showthread.php?p=102679

    Sorry I cant be more specific.

    Murray

Page 1 of 5 123 ... LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •