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

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 movabl开发者_运维问答e Ext objects?

Regards, Casper

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 :)

Create a Panel with draggable:true

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

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.