ComboBox on demand? - Ext JS

I'm building a page with multiple (50-100) typeahead fields. The fields are procedurally generated and can be similarly hooked up via something like:
whatever.select('.Typeahead').foreach( ... build a reader, build a store, build a combo, applyTo(el); )

But that's a lot of work on a page where the user may only interact with 1-5 of the combos. I'm wondering if there is any sort of lightweight on-demand creation I can do. The closest analogy I can think of is to the Grid control and its on-demand editing of cells.

Do you think it would be possible to instantiate my form fields as "single cells" which are basically read-only text boxes until you click on them, at which point they transform in-place into active elements, and then back into text boxes on blur?

I know that there is an applyTo() method on combo boxes to take over existing elements. Is there an opposite function that can undo the effect?

I'm going to try this and see if it works, but if anyone has already attempted this, could you let me know? Thanks!
Steve
  # 2  
03-13-2007, 12:48 AM

AFAIK, you'd have to remove the element and recreate it to do what you want (which any code to undo it would probably have to do anyways since I think it undos the id and modifies css classes).
  # 3  
03-13-2007, 01:45 AM

I would use an editor, that's what they are for.

You can either use normal textboxes or you can even use a div, span or whatever. The editor functionality in the grid is reusable on any element. The current implementation doesn't include save/cancel buttons or ajax support, but there will be a subclass in a future release that includes it.

First create your editor:

var editor = new Ext.Editor(new Ext.ComboBox({....

Then use your normal DomQuery select and wire up on focus or mousedown or whatever you want.

When the event fires, call startEditing(plainInput, plainInput.value); . There are other config options you may want to modify.

Subscribe the the combo select event or blur event and update the orginal box and hide the editor.

The editor stuff was specifically refactored to support exactly what you want to do.
  # 4  
03-13-2007, 01:53 AM

Thanks Jack, that's where I was heading with this and figured you'd have already taken care of it

你可能感兴趣的:(Ajax,css,ext,UP)