title: Sencha Ext JS 4 trouble getting drag&drop to work properly
body: <p>I'm attempting to learn extjs 4 and I've been struggling with drag and drop for the past couple of days. I've attempted to build a simple application with a viewport and 1 panel. I've set the panel to be draggable: true and the viewport to be a dropzone. When I try and drag the panel around the viewport it jumps erratically.</p>
  
  <p>This is a short video clip of the behavior:
  <a href="http://youtu.be/6WRf5j_CAR0" rel="nofollow">http://youtu.be/6WRf5j_CAR0</a></p>
  
  <p>These are my two files:
  app.js</p>
  
  <pre><code>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 &gt; 0)
              viewport[0].add([{
                  xtype: 'panel',
                  width: 300,
                  height: 300,
                  draggable: true
              }]);
  
      }
  });
  </code></pre>
  
  <p>Viewport.js</p>
  
  <pre><code>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;
  
                  }
              });
  
  
  
          }
      }
  
  })
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Cobar Systems Continuity Suite&lt;/title&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="http://themis.dev/ccms/resources/css/ext-all.css"&gt;
      &lt;script type="text/javascript" src="http://themis.dev/ccms/extjs/bootstrap.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://themis.dev/ccms/app.js"&gt;&lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Can anyone tell me what is going on?</p>
  
  <p>I've tried this with Ext JS 4.07 and the 4.1 Beta, same results</p>