面板拖放不工作的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

只是一個建議：一個窗口組件是一個專門的面板，有一個浮動混合 - 可能是你所需要的。