Extjsのdragzoneが知りたい

Extjsが何かって人は

とりあえずここ見て感動してください

今回は,Ext.dd.dragzoneが知りたい

D&D関係が色々種類あって,何が何か分からん
Extjsを使ったD&Dって,いろんな書き方が出来るらしい.
とりあえず,今回はdragzoneが知りたい.
"extjs dragzone"でググってみたら,日本語ドキュメントは3件ですよ,3件.
少なすぎ!
ましてや,dragzoneについて書いてある日本語ドキュメントは0だし.

Let's $7a|2T(start)

ハッカー文字とか,懐かしい..

って,そんなことはどうでもいいとして,とりあえずチュートリアルを読んでみる.

http://extjs.com/learn/Tutorial:Custom_Drag_and_Drop_Part_1

Ext.get(id).dd = new Ext.dd.DDProxy...って記述があるけど,古いバージョンの書き方なのかな?
ドキュメント見ても,Ext.Element.ddってプロパティないし.
今なら,.ddの代わりにinitDDProxyなんだろな

http://extjs.com/learn/Tutorial:Custom_Drag_and_Drop_Part_2

DDProxyとDropZoneを別で定義して,グループ名を合わせれば,1つのD&Dの動きが定義できるわけね.おk

http://extjs.com/learn/Tutorial:Custom_Drag_and_Drop_Part_3

D&Dの時のデータの受け渡し方法として,DDをnewするときのconfigを拡張(override)するやり方があるってことね.おk

http://extjs.com/learn/Tutorial:Advanced_Custom_Drag_and_Drop_Part_1

Ext.dd.DragZoneって,DDProxyを内部に保持するクラスなわけね.
で,DragZoneってのは,Dragするelementのparentを登録するわけね.
で,それを拡張して使うってことね.おk

http://extjs.com/learn/Tutorial:Advanced_Custom_Drag_and_Drop_Part_2

DropTargetを拡張して使うわけね.

Ext.dd以下を一覧にしてみよう

Ext.dd.* サブクラス 説明
DragDrop DD, DDTarget Defines the interface and base operation of items that that can be dragged or can be drop targets. It was designed to be extended, overriding the event handlers for startDrag, onDrag, onDragOver and onDragOut. Up to three html elements can be associated with a DragDrop instance:...
DD DDProxy A DragDrop implementation where the linked element follows the mouse cursor during a drag.
DDProxy DragSource A DragDrop implementation that inserts an empty, bordered div into the document that follows the cursor during drag operations. At the time of the click, the frame div is resized to the dimensions of the linked html element, and moved to the exact location of the linked element. References to the "frame" element refer to the single proxy element that was created to be dragged in place of all DDProxy elements on the page.
DragSource DragZone A simple class that provides the basic implementation needed to make any element draggable.
DragZone TreeDragZone This class provides a container DD instance that proxies for multiple child node sources.By default, this class requires that draggable child nodes are registered with Ext.dd.Registry.
DDTarget DropTarget A DragDrop implementation that does not move, but can be a drop target. You would get the same result by simply omitting implementation for the event callbacks, but this way we reduce the processing cost of the event listener and the callbacks.
DropTarget DropZone A simple class that provides the basic implementation needed to make any element a drop target that can have draggable items dropped onto it. The drop has no effect until an implementation of notifyDrop is provided.
DropZone TreeDropZone This class provides a container DD instance that proxies for multiple child node targets.By default, this class requires that child nodes accepting drop are registered with Ext.dd.Registry.

大杉.

リストにしてみよう

  • DragDrop
    • DD
      • DDProxy
        • DragSource
          • DragZone
    • DDTarget
      • DropTarget
        • DropZone

なんとなく全体を把握できた気がする.
あれ,当初の目的は,DragZoneについて理解することじゃ・・・ま,いっか.