パネルドラッグ＆ドロップは、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にはバグがあります。それは文句を言わないあなたは、このようなパネルのデフォルト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(); }); 
}); 

、このコードは動作するはずです：

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

が動作していない私がいましたあなたはrenderTo要素のidの周りに引用符を追加する必要があり、同様に：それは4.1で動作させることができ、それはuの探していた引用符なし

renderTo : 'divtag', 

divtagという名前の変数が定義されています。

私はそれを実行した後もエラーはなく、次にpanel.show()をレンダリングしました。

Answer 3

ちょっとした提案：ウィンドウコンポーネントは、フローティングミックスインを持つ特別なパネルです。必要なものだけかもしれません。