1

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

Community
  • 1
  • 1
Chau
  • 5,540
  • 9
  • 65
  • 95

4 Answers4

7

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

Chau
  • 5,540
  • 9
  • 65
  • 95
  • 1
    Greate, thanks. One addition: if the panel has a top toolbar, its height must also be subtracted from the y coordinata: `var tbarHeight = this.panel.ownerCt.getTopToolbar().getHeight(); this.panel.setPosition(this.x - parentPosition[0], this.y - parentPosition[1] - tbarHeight);` – Martin Dimitrov Aug 12 '11 at 21:07
3

Create a Panel with draggable:true

Brian Moeskau
  • 20,103
  • 8
  • 71
  • 73
  • I have tried that and still working on it. How much will I need to implement? DDProxy, DropTargets or similar? – Chau Jun 25 '10 at 06:15
  • 1
    Depends on what you're trying to do, but you shouldn't have to do anything with those specific classes. – Brian Moeskau Jun 25 '10 at 13:15
  • 1
    If I set draggable:true, I can move the panel, but it always want to go back to the initial position (and it shows the dashed container). I just want it to be movable so I can drag it anywhere inside its parent. There is an example in the API (panel, draggable) which allows me to move the panel around. But the final positioning of the panel/proxy is done according to the browser window and not the container window - which I need. – Chau Jun 28 '10 at 08:28
1

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

Drasill
  • 3,917
  • 29
  • 30
  • I think floating removes it from the layout and assigns a shadow to the panel. By making the panel draggable and adjusting the dragging, I might get moving-like capabilities. – Chau Jun 24 '10 at 11:20
  • I think the portal exemple is a good source of informations : http://www.sencha.com/deploy/dev/examples/portal/portal.html And portlets (draggable panels in a portal container) are made from panel, with specific attributes including floating : http://www.sencha.com/deploy/dev/examples/ux/Portlet.js – Drasill Jun 24 '10 at 12:31
0

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.

Forivin
  • 14,780
  • 27
  • 106
  • 199