1

我有一个Ext.Container，我需要向它添加一个用户可移动的对象。

我在其他地方看到Ext.Window不应该嵌套到对象中，因此对于其他可移动的Ext对象，我有什么选择？

问候， 卡斯帕

4

4 回答 4

7

回到这个问题，你的建议一路帮助我。面板的ExtJS文档建议如何自定义实现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);
    }
}

在我的项目中，我需要一个容器元素中的可拖动元素，因此我需要做一些额外的事情。
为什么？ 因为检索任何位置信息都是在browser-window-space中完成的，并且设置位置似乎在parent-space中。因此，我需要在设置最终面板位置之前翻译位置。

//  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);
    }
}

我希望这可以帮助其他人，再次感谢您的投入:)

于 2010-07-28T07:15:04.330 回答
3

创建一个面板draggable:true

于 2010-06-24T14:47:25.087 回答
1

我不确定，但也许你可以试试floating面板的属性。

于 2010-06-24T10:50:20.420 回答
0

答案其实很简单。您只需将 Drasill 的答案与 Brian Moeskau 的答案结合起来，并添加一个宽度和一个高度。

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,
})

从技术上讲，没有floating. 例如，面板可能最终位于其兄弟姐妹之后，而其内容最终位于它们之前。

于 2018-02-20T08:50:19.897 回答