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
A:
I'm not sure, but maybe you can try the floating attribute of panels.
Drasill
2010-06-24 10:50:20
@Drasil: 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
2010-06-24 11:20:02
I think the portal exemple is a good source of informations :http://www.sencha.com/deploy/dev/examples/portal/portal.htmlAnd 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
2010-06-24 12:31:55
@bmoeskau: I have tried that and still working on it. How much will I need to implement? DDProxy, DropTargets or similar?
Chau
2010-06-25 06:15:02
Depends on what you're trying to do, but you shouldn't have to do anything with those specific classes.
bmoeskau
2010-06-25 13:15:31
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
2010-06-28 08:28:04
+2
A:
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
2010-07-28 07:15:04