代码之家 › 专栏 › 技术社区 › Chau

extjs3.x:我可以让面板或容器移动吗?

movable object extjs javascript

Chau · 技术社区 · 14 年前

我有一个 外部容器

我懂了 elsewhere 外景窗 不应该嵌套到对象中,因此对于其他可移动对象,我的选项是什么物体?

4 回复 | 直到 7 年前

Chau 14 年前

回到这个问题上,你的建议一路帮助了我。这个 ExtJS公司 面板习俗实施拖动 .

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

为什么? 因为检索任何位置信息都是在而且设定位置似乎很合适 父空间

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

我希望这能帮助其他人,再次感谢您的投入:)

Brian Moeskau 14 年前

draggable:true

Drasill 14 年前

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

Forivin 6 年前

答案其实很简单。你只要把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