Sencha Ext JS 4 проблема с перетаскиванием и правильной работой

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

Это короткое видео клип поведения: 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; 

       } 
      }); 



     } 
    } 

})

индекс. 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, такие же результаты

источник

2012-01-28 Casey Flynn

Я ответил [подобный вопрос здесь ] (http://stackoverflow.com/questions/8558564/panel-drag-and-drop-is-not-working-in-extjs-4-1). Возможно, это может помочь вам (по крайней мере, в качестве путеводителя). – sbgoran

Убедитесь в Измени Группу DOM элемента, хотя панель является компонентом

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

источник

2013-07-05 07:01:43 Feroz

Sencha Ext JS 4 проблема с перетаскиванием и правильной работой

ответ

Смежные вопросы