Extjs 3.x: Can I make a panel or a container movable?

Question

I have an Ext.Container and I need to add to it a user-movable object.

I see elsewhere that an Ext.Window is not supposed to be nested into objects, thus what are my options regarding other movable Ext objects?

Regards, Casper

Answer 1

Returning to this problem, your suggestions helped me along the way. The ExtJS documentation for a panel suggest how to do a custom implementation of draggable.

draggable: {
//  Config option of Ext.Panel.DD class.
//  It's a floating Panel, so do not show a placeholder proxy in the original position.
    insertProxy: false,

//  Called for each mousemove event while dragging the DD object.
    onDrag : function(e){
//      Record the x,y position of the drag proxy so that we can
//      position the Panel at end of drag.
        var pel = this.proxy.getEl();
        this.x = pel.getLeft(true);
        this.y = pel.getTop(true);

//      Keep the Shadow aligned if there is one.
        var s = this.panel.getEl().shadow;
        if (s) {
            s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
        }
    },

//  Called on the mouseup event.
    endDrag : function(e){
        this.panel.setPosition(this.x, this.y);
    }
}

In my project, I needed draggable elements inside a container element, thus I needed to do something extra.
Why? Because retrieving any position information is done in browser-window-space and setting the position seems to be in parent-space. Thus I needed to translate the position before setting the final panel position.

//  Called on the mouseup event.
endDrag: function (e) {
    if (this.panel.ownerCt) {
        var parentPosition = this.panel.ownerCt.getPosition();
        this.panel.setPosition(this.x - parentPosition[0], this.y - parentPosition[1]);
    } else {
        this.panel.setPosition(this.x, this.y);
    }
}

I hope this can help others and again thanks a lot for your inputs :)

Answer 2

Create a Panel with draggable:true

Answer 3

I'm not sure, but maybe you can try the floating attribute of panels.

Answer 4

The answer is actually really simple. You just have to combine the answer from Drasill with the answer from Brian Moeskau and add a width and a height.

https://fiddle.sencha.com/#view/editor&fiddle/2dbp

Ext.define('CustomPanel',{
    extend: 'Ext.form.Panel',
    title: 'Custom panel',
    floating: true,
    draggable: true,
    width: 600,
    height: 400,
    //closable: true,
})

Technically it would work without the floating, but it causes unexpected behaviour if your panel is a child of something else. For instance the panel could end up behind it's siblings while it's content ends up in front of them.