перетаскивание панели не работает в extjs 4.1 - PullRequest
Новая
       24

перетаскивание панели не работает в extjs 4.1

2 голосов
/ 19 декабря 2011

Этот код работает в Extjs 4.0.2a но при преобразовании в 4.1 он больше не работает и выдает ошибку

Uncaught TypeError: Cannot call method 'query' of undefined 

Ext.onReady(function() {

    var panel = new Ext.Panel({
        renderTo: divtag,
        draggable: {
            insertProxy: false,
            onDrag: function(e) {
                var el = this.proxy.getEl();
                this.x = el.getLeft(true);
                this.y = el.getTop(true);
            },
            endDrag: function(e) {
                this.panel.setPosition(this.x, this.y);
            }
        },
        title: 'Panel',
        width: 200,
        height: 100,
        x: 20,
        y: 20
    });
});

Ответы [ 3 ]

3 голосов
/ 28 декабря 2011

Видимо, есть ошибка в этой версии Ext. Это не будет работать, даже если вы попробуете D'n'D по умолчанию для панели, как это: 

Ext.onReady(function() {
    var panel = new Ext.Panel({
        renderTo: 'divtag',
        draggable: true,
        title: 'Panel',
        width: 200,
        height:100,
        x: 20,
        y: 20
    }); //panel.show(); });
});

Мне удается исправить код, чтобы он работал так, как вы хотите, этот код должен работать: 

Ext.onReady(function() {
    var panel = new Ext.Panel({
        renderTo: 'divtag',
        draggable: {
            insertProxy: false,
            onDrag: function(e) {
                var el = this.proxy.getEl();
                this.x = el.getX();
                this.y = el.getY();
            },
            endDrag: function(e) {
                panel.setPosition(this.x,this.y);
            },
            alignElWithMouse: function() {
                panel.dd.superclass.superclass.alignElWithMouse.apply(panel.dd, arguments);
                this.proxy.sync();
            }
        },
        title: 'Panel',
        width: 200,
        height:100,
        x: 20,
        y: 20
    }); //panel.show(); });
});

В качестве примечания, вероятно, я бы порекомендовал вам не делать этого в любом случае, потому что вы можете определить свой собственный DD для панели, которую вы можете использовать, и даже лучше, если Ext уже определил ее, так что вы можете просто переопределить панель Ext для использования по умолчанию Ext.util.ComponentDragger , или в коде, я советую вам сделать это: 

Ext.override(Ext.panel.Panel, {
    initDraggable: function() {
        var me = this,
            ddConfig;

        if (!me.header) {
            me.updateHeader(true);
        }

        if (me.header) {
            ddConfig = Ext.applyIf({
                el: me.el,
                delegate: '#' + me.header.id
            }, me.draggable);

            // Add extra configs if Window is specified to be constrained
            if (me.constrain || me.constrainHeader) {
                ddConfig.constrain = me.constrain;
                ddConfig.constrainDelegate = me.constrainHeader;
                ddConfig.constrainTo = me.constrainTo || me.container;
            }

            me.dd = Ext.create('Ext.util.ComponentDragger', this, ddConfig);
            me.relayEvents(me.dd, ['dragstart', 'drag', 'dragend']);
        }
    }
});
var panel = Ext.create('Ext.panel.Panel', {
    id: 'test',
    renderTo: 'divtag',
    draggable: true,
    floating: true,
    title: 'Panel',
    width: 200,
    height:100,
    x: 20,
    y: 20
});

Код для функции initDraggable в переопределении панели взят из текущей стабильной версии Ext.window.Window.initDraggable .

2 голосов
/ 21 декабря 2011

Мне удалось заставить его работать в 4.1: вы должны добавить кавычки вокруг идентификатора элемента renderTo, например: 

renderTo : 'divtag',

Без кавычек он искал неопределенную переменную с именем divtag.

Как только я запустил, у меня не было ошибок, а затем я просто сделал panel.show(), чтобы отрендерить его.

0 голосов
/ 22 декабря 2011

Просто предложение: компонент Window - это специализированная панель с плавающим миксином - может быть, все, что вам нужно.

...