Extjs 3.x: можно ли сделать панель или контейнер подвижными? - PullRequest
Новая
       17

Extjs 3.x: можно ли сделать панель или контейнер подвижными?

1 голос
/ 24 июня 2010

У меня есть Ext.Container , и мне нужно добавить к нему перемещаемый пользователем объект.

Я вижу в другом месте , что Ext.Window не должно быть вложено в объекты, поэтому каковы мои варианты в отношении других подвижных Ext объектов?

С уважением, Каспер

Ответы [ 4 ]

7 голосов
/ 28 июля 2010

Возвращаясь к этой проблеме, ваши предложения помогли мне на этом пути. Документация 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);
    }
}

В моем проекте мне нужно было перетаскивать элементы внутри элемента контейнера, поэтому мне нужно было сделать что-то дополнительное.
Почему? Поскольку извлечение любой информации о положении выполняется в 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);
    }
}

Я надеюсь, что это может помочь другим, и еще раз большое спасибо за ваш вклад:)

3 голосов
/ 24 июня 2010

Создать панель с draggable:true

1 голос
/ 24 июня 2010

Я не уверен, но, возможно, вы можете попробовать атрибут floating панелей.

0 голосов
/ 20 февраля 2018

Ответ на самом деле очень прост.Вам просто нужно объединить ответ Драсилла с ответом Брайана Мескау и добавить ширину и высоту.

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, но это вызывает неожиданное поведение, если ваша панель является потомком чего-то другого.Например, панель может оказаться за своими братьями и сестрами, а ее содержимое окажется перед ними.

...