面板拖放不工作的ExtJS 4.1

Question

此代码工作在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 
    }); 
}); 

Answer 1

显然这个版本的Ext有一个bug。如果您尝试默认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(); }); 
}); 

我MENAGE修补代码工作，你想要的方式，此代码应工作：

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方法。

Answer 2

我能得到它在4.1的工作：你必须增加围绕renderTo元素的id报价，如：

renderTo : 'divtag', 

没有它正在寻找一条u报价名为divtag的ndefined变量。

一旦我跑了，我没有错误，然后我只是panel.show()来渲染它。

Answer 3

只是一个建议：一个窗口组件是一个专门的面板，有一个浮动混合 - 可能是你所需要的。