Сенча Ext JS 4, проблемы создания перемещаемой панели с другой панелью

Question

Я пытался задать этот вопрос на форумах Сенча и не было никакой удачи: http://www.sencha.com/forum/showthread.php?175816-Attempting-to-create-draggable-panel-within-another-panel-stuck-in-upper-left-corner

Я пытаюсь добавить небольшую панель в другой панели и позволяют пользователям перетаскивать его по экрану.

Ext.define('CS.view.StartScreen', { extend: 'Ext.panel.Panel', 
    alias: 'widget.startscreen', 
    items: [{ 
     xtype: 'panel', 
     title: 'Hello', 
    // closable: true, 
    // collapsible: true, 
     draggable: true, 
    // resizable: true, 
    // maximizable: true, 
     constrain: true, 
     height: 300, 
     width: 300 
    }], 
    dockedItems: [{ 
     xtype: 'toolbar', 
     dock: 'bottom', 
     layout: 'hbox', 
     pack: 'center', 
     items: [ 
      {xtype: 'button', text: 'Click Me'} 
     ] 
    }] 
}); 

Однако всякий раз, когда я пытаюсь перетащить панель, она возвращается в верхний левый угол. Может ли кто-нибудь сказать мне, что я делаю неправильно? Благодаря!

---

Edit 1 Полный код приложения с проблемой:

app.js

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

Ext.application({ 
    name: 'CS', 

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

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

    launch: function(){ 

    } 
}); 

TestCreator.js

Ext.define('CS.controller.TestCreator', { 
    extend: 'Ext.app.Controller', 

    views: [ 
     'testcreator.ViewTestCreator' 
    ], 

    init: function(){ 

     console.log('testcreator init'); 

     this.control({ 

     }); 

    } 
}); 

Primary.js

Ext.define('CS.controller.Primary',{ 
    extend: 'Ext.app.Controller', 

    views: [ 
     'ViewLogin', 
    ], 

    init: function(){ 

     this.control({ 
      'viewport': { 
       afterrender: function(viewport, opts){ 

        viewport.add([{ 
         xtype: 'viewlogin', 
         itemId: 'viewlogin' 
        }]); 

       } 
      }, 
      'viewlogin button[text = Submit]': { 
       click: function(btn, e, eOpts){ 

        var form = btn.up('form').getForm(); 
        form.submit({ 
         success: function(form, action){ 

          console.log(action.result); 

          btn.up('viewport').remove('viewlogin'); 
          var viewport = Ext.ComponentQuery.query('viewport'); 

          if(viewport.length > 0) 
           viewport[0].add({xtype: 'dashboard'}); 

         }, 
         failure: function(form, action){ 

         }, 
         scope: this 
        }); 

       } 
      } 
     }); 

    } 

}); 

Manager.js

Ext.define('CS.controller.Manager', { 
    extend: 'Ext.app.Controller', 

    views: [ 
     'ViewDashboard' 
    ], 

    init: function(){ 

     this.control({ 
      'viewport > formbuilder': { 
       render: function(){ 
        console.log('render yo'); 
       } 
      } 
     }); 

    } 
}); 

Viewport.js

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

ViewLogin.js

Ext.define('CS.view.ViewLogin',{ 
    extend: 'Ext.panel.Panel', 
    alias: 'widget.viewlogin', 
    layout: { 
     type: 'vbox', 
     align: 'center', 
     pack: 'start' 
    }, 
    items: [{ 
     flex: 1, 
     border: false 
    },{ 
     xtype: 'form', 
     url: '/index.php/auth', 
     baseParams: { 
      csrf_token: Ext.util.Cookies.get('ci_csrf'), 
      cs_method: 'user_login' 
     }, 
     width: 300, 
     layout: 'anchor', 
     title: 'Login', 
     defaults: { 
      margin: '5 5 5 5' 
     }, 
     items: [{ 
       xtype: 'textfield', 
       fieldLabel: 'Username', 
       inputType: 'text', 
       name: 'username' 
      },{ 
       xtype: 'textfield', 
       fieldLabel: 'Password', 
       inputType: 'password', 
       name: 'password' 
      }], 
     buttons: [{ 
       text: 'Reset', 
       handler: function() { 
        console.log('button pressed'); 
        this.up('form').getForm().reset(); 
       } 
      },{ 
       text: 'Submit' 
      }] 
    },{ 
     flex: 2, 
     border: false 
    }] 
}); 

ViewDashboard. JS

Ext.define('CS.view.ViewDashboard', { 
    extend: 'Ext.panel.Panel', 
    alias: 'widget.dashboard', 
    layout: 'fit', 

    bodyStyle: {"background-color":"#FF6600"}, 

    items: [{ 
     xtype: 'testcreator' 
    }], 

    dockedItems: [{ 
     xtype: 'toolbar', 
     dock: 'bottom', 
     layout: 'hbox', 
     pack: 'center', 
     items: [{ 
       xtype: 'splitbutton', 
       text: 'Applications', 
       handler: function(){ 
        console.log('splitbutton'); 
       }, 
       menu: new Ext.menu.Menu({ 
        items: [ 
         {text: 'Item 1', hander: function(){}}, 
         {text: 'Item 2', hander: function(){}}, 
        ] 
       }) 
     }] 
    }], 
    listeners: { 
     render: function(sender){ 

      console.log(sender); 

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

       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(50, 50, true); 
        return true; 

       } 
      }); 



     } 
    } 
}); 

TestCreator.js

Ext.define('CS.view.testcreator.ViewTestCreator', { 
    extend: 'Ext.panel.Panel', 

    alias: 'widget.testcreator', 

    layout: { 
     type: 'hbox', 
     pack: 'start', 
     align: 'stretch' 
    }, 

    draggable: true, 
    title: 'Form Builder', 

    width: 600, 
    height: 450, 

    dockedItems: [{ 
     xtype: 'toolbar', 
     dock: 'top', 
     layout: 'hbox', 
     items: [{ 
      text: 'File' 
     },{ 
      text: 'Edit' 
     },{ 
      text: 'Help' 
     }] 
    }], 

    items: [{ 
     html: 'panel 1', 
     flex: 1 
    },{ 
     html: 'panel 2', 
     flex: 2 
    }] 
}); 

Answer 1

Вы должны реализовать drop zone для CS.view.StartScreen. Например, вы можете добавить следующие визуализации обработчик кода:

render: function(sender) { 
    sender.dropZone = new Ext.dd.DropZone(sender.body, { 

     getTargetFromEvent: function(e) { 
      return { 
       x: e.getX() - this.DDMInstance.deltaX, 
       y: e.getY() - this.DDMInstance.deltaY 
      }; 
     }, 

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

     onNodeDrop : function(target, dd, e, data){ 
      data.panel.setPosition(target.x, target.y); 
      return true; 
     } 
    }); 
} 

Рабочий пример: http://jsfiddle.net/lolo/5MXJ9/2/