View Full Version : Edit a form element inline like you can with the grid

18 Apr 2007, 9:53 AM
Hi Gang:

How would one create a form that you can edit and save inline?

There is a box with name value pairs:
-- First Name: John
-- Last Name: Doee
-- Phone: 555-5555

The user goes to this form to retrieve John Doe's phone number and notices that Doe has a typo.
The user then clicks on the word "Doee" and it turns into an input box, they take out the extra "e", focus out and that field saves itself to the database.

How could I go about doing this using Ext?

I think it would be nice to build this box using Ext.form because it can make the name/value pairs look really nice and have it ready to be edited.

I would appreciate any bread crumbs one may give.

18 Apr 2007, 10:41 AM
Did you look at the form examples?

18 Apr 2007, 12:35 PM
Sorry that I didn't explain my self better.

The user goes to a page like:

<span style='width: 100px'>First Name</span>
<span style='width: 100px'>Last Name</span>
<span onclick='turnToInputBox()'>Doee</span>

When you click on "Doee" it turns into an input box.

<span style='width: 100px'>First Name</span>
<span><input type='text' name='name' value='Doee' onBlur='autoSaveForm'></span>

I'm not sure of an easy way of doing this without totally reinventing the wheel, and since the grid already has this functionality, I imagine that there is a 1 liner out there to do this.

18 Apr 2007, 12:52 PM
It's not a 1-liner look at how the combo examples transforms an existing select. You can the same with an input field, using the TextField class. You can add a handler for the blur event.

18 Apr 2007, 1:31 PM
Ah, thank you very much. I didn't think of looking at the combo box.

I was spending my time looking at the grid and how it does it and kept running into walls.

18 Apr 2007, 4:42 PM
I am currently working on the same requirement that you seem to be regarding "edit-in-place" with ext. I am very interested in any code you might share as you work this out.

I have been working with a variation of code as found in this post: http://extjs.com/forum/showthread.php?t=4807

and modifying so that it saves the value of a field as you blur through the form. I have this working. The next step is to start with plain text in a div and then dynamically display the form field when the user clicks - as you have described...

18 Apr 2007, 8:14 PM
You guys could have a look at my AjaxForm class (shown on my page in my signature). It stems from pre-ext-form times, so it does currently not enhance/modify Ext.form.Form, but I plan to merge it in the future. It's not exactly edit-in-place, but maybe it fits your original intent better ;)