PDA

View Full Version : Inline Edit (aka Edit In Place) Control



Nigel
6 Jan 2011, 4:37 AM
Has anyone produced an Inline Edit component for ExtJS?

I'm thinking about using Inline Edit (aka Edit In Place) in my UI, and started thinking this morning about how that might be implemented. What I'm referring to is the idea that you have a piece of data that is displayed rather boringly within some raw HTML or whatever - not necessarily another ExtJS component, or at least not directly (I've just started using Condor's excellent HTMLLayout (http://www.sencha.com/forum/showthread.php?79191) which has opened up a whole layer of flexibility for me). When you hover over that data, it can change its display (maybe a different background colour), and when you click it, it changes into an editor. You edit the data, and hit Enter, or click away somewhere else, and the data gets saved.

A quick google trawl showed that this has been done by a few people in jQuery, but I reckon there could be a few different approaches to dealing with this in ExtJS.

1. Use an editor concept similar to that in EditableGrid - when the component is clicked, set-up the (new or pre-existing) editor with the same position and size as the underlying component
2. Alternatively use a single form field
3. Would it use a store with a single field, or is that a sledgehammer to crack the nut?
4. It would need to make and XHR call back to the server - this could be either through a customised XHR call or utilising the existing functionality of a store.

These are an initial brain-dump - if anyone has done this before, or has some thoughts on how this could be done, please let me know and we'll see if we can get something useful created :). Alternatively, if you think I'm nuts to even attempt it, be gentle with me...

Nigel
6 Jan 2011, 12:32 PM
OK - somewhat bizarrely (as it didn't appear in any forum or google searches when I was looking for this specifically), I tripped over the following link when searching on a completely unrelated topic

http://www.sencha.com/learn/Extension:InlineFormFields

Looks like this has been done before for v1.x but not been updated since. I'll take a look at it when I get a chance and will update this thread if I get anything working with v3.x (or v4.x, depending on how long it stays towards the bottom of my to-do list :) )

In the meantime, the original request for thoughts and views on the best approach still stands!