Hi.

I've been trying all day to make a FormPanel that I can dynamically add form elements to and reorder their position using drag and drop; A kind of form designer I guess.

I've looked at a lot of examples, but generally they only cover how to drag and drop between two UI components (grid to form, grid to grid, ect). What I want to do is drag-drop and reorder items within a single FormPanel.

I seem to have nearly been able to achieve this by setting the components to be both "draggable: true" and a drop target. My understand is that to reposition an object you have to clone it and then delete the original; I'm successful in creating the new component, but I get and error when removing the old copy.

Am I over-complicating this?

Code:
MyApp.FormPanel = Ext.extend(Ext.FormPanel, {

    title: 'Fields',
    fieldSetCount: 0,

    constructor: function(config) {
        Ext.apply(this, config);
        this.tbar = [{
            text: 'Add Field Set',
            handler: this.addFieldSet,
            scope: this
        }];
        MyApp.FormPanel.superclass.constructor.call(this, config);
    },

    initialiseDropTarget: function(panel) {
        panel.dropZone = new Ext.dd.DropTarget(this.el, {
            ddGroup: 'fieldSetDDGroup',
            insertProxy: false
        });
    },

    addFieldSet: function() {
        this.add({
            xtype: 'fieldset',
            title: 'Fieldset ' + this.fieldSetCount++,
            draggable: {
                ddGroup: 'fieldSetDDGroup',
                onDragDrop: function(e, id) {
                    var target = Ext.getCmp(id);
                    var targetIndex = target.ownerCt.items.indexOf(target);
                    target.ownerCt.insert(targetIndex - 1, this.panel.cloneConfig());
                    target.ownerCt.remove(this.panel.id);
                    target.ownerCt.doLayout();
                }
            },
            listeners: {
                afterrender: this.initialiseDropTarget
            }
        });
        this.doLayout();
    }
});