PDA

View Full Version : Click-to-Edit FormPanel



chalu
17 Aug 2008, 3:28 PM
Following the DataView example from here (http://www.extjs.com/deploy/dev/examples/view/data-view.html)(which lets you alter the file names), I was motivated to do something similar for forms such that the fields are initially rendered as 'labels' and then when they are clicked (or double clicked) they allow the user to alter / enter values by showing an editor, which in the case of forms will be the field component itself.

This can be useful when you want to provide a user with some data that they can altered but with validation and the likes.

How best is it to go about this. By the way the example I cited above used a LabelEditor plugin which is also a subclass of Ext.Editor that is - both a plugin and an extension, how is this :-/:-/

Animal
17 Aug 2008, 11:08 PM
I think someone has done this. A Form Field ux which renders as plain text, but allows click to edit.

It should be pretty easy to implement if you can't find it. Just extend Ext.form.Field, override onRender to output a <span> with a click listener, and hook that up to an Ext.Editor.

Well, sounds simple, but I'm sure there are a few things to iron out!

chalu
18 Aug 2008, 7:01 AM
My thought is to make a plugin for formpanel that will iterate over the form's fields and provide the custom behavior for each of the fields. For complex descendants of Ext.ux.Field or those that cannot be easily represented with a span (http://extjs.com/forum/showthread.php?p=179007), maybe I'll create a call back so that the user of the plugin can now configure a handler to handle the initial representation of such 'special' fields.

I' ll ignore those 'special' cases for now