Проблема с Sencha Ext JS 4, заставляющая перетаскивать и работать правильно - PullRequest
Новая
       38

Проблема с Sencha Ext JS 4, заставляющая перетаскивать и работать правильно

1 голос
/ 28 января 2012

Я пытаюсь изучить extjs 4, и последние пару дней я боролся с перетаскиванием. Я попытался создать простое приложение с окном просмотра и 1 панелью. Я установил панель для перетаскивания: true и область просмотра - в качестве dropzone. Когда я пытаюсь перетащить панель вокруг окна просмотра, она скачет хаотично.

Это короткий видеоролик о поведении: http://youtu.be/6WRf5j_CAR0

Это мои два файла: app.js 

Ext.Loader.setConfig({
    enabled: true
});

Ext.application({
    name: 'CS',

    appFolder: 'ccms/app',
    autoCreateViewport: true,

    controllers: [
    //    'TestCreator',
       //    'Primary',
    //    'Manager'
    ],

    launch: function(){

        var viewport = Ext.ComponentQuery.query('viewport');

        if(viewport.length > 0)
            viewport[0].add([{
                xtype: 'panel',
                width: 300,
                height: 300,
                draggable: true
            }]);

    }
});

Viewport.js 

Ext.define('CS.view.Viewport', {
    extend: 'Ext.container.Viewport',
//    layout: 'fit',

    listeners: {
        render: function(sender){

            console.log(sender);

            sender.dropZone = new Ext.dd.DropZone(sender.container, {

                getTargetFromEvent: function(e) {

                    console.log('getTargetFromEvent');

                    var temp = {
                        x: e.getX() - this.DDMInstance.deltaX,
                        y: e.getY() - this.DDMInstance.deltaY
                    };

                    console.log(temp);
                    return temp;

                },

                // On entry into a target node, highlight that node.
                onNodeEnter : function(target, dd, e, data){
                //    Ext.fly(target).addCls('my-row-highlight-class');
                },

                // On exit from a target node, unhighlight that node.
                onNodeOut : function(target, dd, e, data){
                //    Ext.fly(target).removeCls('my-row-highlight-class');
                },

                onNodeOver : function(target, dd, e, data){
                    return Ext.dd.DropZone.prototype.dropAllowed;
                },

                onNodeDrop : function(target, dd, e, data){

                    console.log('onNodeDrop');
                    data.panel.setPosition(target.x, target.y, true);
                    return true;

                }
            });



        }
    }

})

index.html 

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Cobar Systems Continuity Suite</title>

    <link rel="stylesheet" type="text/css" href="http://themis.dev/ccms/resources/css/ext-all.css">
    <script type="text/javascript" src="http://themis.dev/ccms/extjs/bootstrap.js"></script>
    <script type="text/javascript" src="http://themis.dev/ccms/app.js"></script>


</head>
<body>
</body>
</html>

Может кто-нибудь сказать мне, что происходит?

Я пробовал это с Ext JS 4.07 и 4.1 Beta, те же результаты

1 Ответ

0 голосов
/ 05 июля 2013

Обязательно измените Panel на DOM, хотя Panel является компонентом 

listener: {
render: function (panel) {
    var PanelEl = Ext.get(panel.id);
    sender.dropZone = new Ext.dd.DropZone(PanelEl, {
             //...
        }
    }
...