cloning ExtJS components using JQuery

Question

I'm trying to clone form components using JQuery's .clone() (actually, I'm cloning a collection of fields by cloning the container element). Everything worked out well except that the datefield, comboboxes are not working, even the validation for minLength, etc. is also not working.

By the way, I'm just transforming an old html form fields to ext js form fields using applyTo

Answer 1

For a start you can try using

.clone(true)

so all event handlers for an element are copied. Apart from that I suspect Extjs does some other funky stuff when building its controls therefore this is probably only the first step to getting it working. Looking around quickly on the extjs forums I dont see alot of info about cloning widgets.

Answer 2

The problem is that jQuery clone() does not clone the event handlers associated with DOM elements. But even if you use clone(true), that does copy the event handlers, it still doesn't work, because you also need to clone the Ext object on the JavaScript side.

You really need to use the tools provided by Ext to create many similar controls. A good start is to create custom Ext components, that you can then more easily instanciate multiple times.