Problem with Container.remove

[winklerd]

I'm running into an odd problem. I have a solution, but it's not quite what I want because it theoretically leaves extra items floating around.

I have a Panel that is a container for other Panels. Let's say I have 2 items in the container. If I close one of them then attempt to move the other via a drag/drop, I get the lovely error "c.getPositionEl().dom is undefined" and the item stays floating. If I click a second time, it will drop correctly.

I'm removing the items with a 'close' tool:

{
    id: 'close',
    handler: function(e, target, panel) {
        var owner = panel.ownerCt;

        owner.remove(panel, true);
        owner.doLayout();
    }
}

The way to fix it is by changing true to false in the owner.remove line. But I DO want the element destroyed, don't I? Once I remove it from the container, I don't care about it anymore.

Oh, and if it makes a difference, I'm using the container clear plugin on my container panel.

[Condor]

You are removing the panel correctly, so you shouldn't be getting that error.

ps. What is the 'container clear plugin'?

[winklerd]

Sorry, it was something Animal showed me, since sometimes I want to remove and re-add a panel:

FC.Widgetator.ContainerClear = new function() {
    var bin,
        afterRemove = function(comp, autoDestroy) {
            if(!this.autoDestroy || (autoDestroy === false)) {
                if (!bin) {
                    bin = new Ext.Container({
                        id: 'x-bin-container',
                        cls: 'x-hidden',
                        renderTo: document.body
                    });
                }
                bin.add(comp);
                bin.doLayout();
            }
        };

    this.init = function(ctr) {
        ctr.remove = ctr.remove.createSequence(afterRemove);
    };
};

In this case, however, I am removing panel A and then trying to drag/drop panel B, and I'm getting that error. I agree with you that I don't think I should be getting that error, and yet I am. Here's a more complete look at my DropTarget code:

FC.Widgetator.DropZone = Ext.extend(Ext.dd.DropTarget, {
    constructor : function(p, cfg){
        this.p = p;
        Ext.dd.ScrollManager.register(p.body);
        FC.Widgetator.DropZone.superclass.constructor.call(this, p.bwrap.dom, cfg);
        p.body.ddScrollConfig = this.ddScrollConfig;
    },

    ddScrollConfig : {
        vthresh: 50,
        hthresh: -1,
        animate: true,
        increment: 200
    },

    notifyOver: function(dd, e, data) {
        var xy = e.getXY(), pw = this.p.el.getWidth();

        if(!this.lastPW) this.lastPW = pw;
        else if(this.lastPW != pw) {
            this.lastPW = pw;
            this.p.doLayout();
        }

        var i, match = false, pos = 0, overSelf = false;
        for( ; pos < this.p.items.items.length ; pos++) {
            i = this.p.items.items[pos];
            h = i.el.getHeight();
            if(h === 0) overSelf = true;
            else if((i.el.getY()+(h/2)) > xy[1]) {
                match = true;
                break;
            }
        }

        pos = (match && i ? pos : this.p.items.items.length) + (overSelf ? -1 : 0);
        this.lastPos = overSelf || (match && i) ? pos : false;

        if(i && !data.componentData)
            dd.proxy.moveProxy(i.el.dom.parentNode, match ? i.el.dom : null);

        return this.dropAllowed;
    },

    notifyDrop: function(dd, e, data){
        if(data.componentData) { // If we are adding a new panel
            var node = new Ext.Panel({
                items: [data.componentData.component.cloneConfig()],
                title: data.componentData.label,
                collapsible: true,
                draggable: true,
                margins: '5px 5px 5px 5px',
                tools: [{
                    id: 'up',
                    handler: function(e, target, panel) {
                        if(panel.pos == 0) return;

                        var owner = panel.ownerCt;
                        var pos = panel.pos;

                        owner.remove(panel,false);
                        owner.insert(pos - 1, panel);
                        owner.doLayout();
                    }
                },{
                    id: 'down',
                    handler: function(e, target, panel) {
                        if(panel.pos == panel.ownerCt.items.items.length - 1) return;

                        var owner = panel.ownerCt;
                        var pos = panel.pos;

                        owner.remove(panel,false);
                        owner.insert(pos + 1, panel);
                        owner.doLayout();
                    }
                },{
                    id: 'close',
                    handler: function(e, target, panel) {
                        var owner = panel.ownerCt;

                        owner.remove(panel,true);
                        owner.doLayout();
                    }
                }]
            });

            if(this.lastPos === false) this.p.add(node);
            else this.p.insert(this.lastPos,node);
        } else { //Otherwise, we are dragging and existing panel
            if(this.lastPos === false) this.p.add(dd.panel);
            else this.p.insert(this.lastPos,dd.panel);
            dd.proxy.getProxy().remove();
        }
        this.p.doLayout();
        return true;
    }

});