Dataview drag and drop

  1. #1

    Dataview drag and drop

    Hi
    I am trying a drag and drop from Dataview to another dataview

    basically first Dataview has multiple images and i need to drag and drop to another

    to begin with i jused drop zone
    <ext:DragZone ID="DragZone1" runat="server" Target="={#{ImageView}.getEl()}">
    <GetDragData Fn="getDragData" />
    <GetRepairXY Fn="getRepairXY" />
    </ext:DragZone>

    <ext:DropZone ID="DropZone1" runat="server" Target="={#{dvDroppedImage}.getEl()}">

    <GetTargetFromEvent Fn="getTargetFromEvent" />
    <OnNodeEnter Fn="onNodeEnter" />
    <OnNodeOut Fn="onNodeOut" />
    <OnNodeOver Fn="onNodeOver" />
    <OnNodeDrop Fn="onNodeDrop" />
    </ext:DropZone>


    and
    var onNodeDrop = function (target, dd, e, data) {
    App.dvDroppedImage.getStore().load();
    App.dvDroppedImage.getStore().loadData(data);


    return true;
    };

    both stores look like this
    <Store>
    <ext:Store ID="Store3" runat="server">
    <Model>
    <ext:Model ID="Model7" runat="server" IDProperty="Name">
    <Fields>
    <ext:ModelField Name="Name" />
    <ext:ModelField Name="Url" />
    <ext:ModelField Name="Description" />
    <ext:ModelField Name="guid"></ext:ModelField>
    </Fields>
    </ext:Model>
    </Model>
    </ext:Store>
    </Store>

    Unfortunately this does not work


    Funny thing is , i tried the same thing via HTML, ie updating the html of the target dataview body with the 'data' and it works like a charm ,
    but somehow i feel the compulsion to do it via store . Any help is appreciated
    var onNodeDrop = function (target, dd, e, data) {
    //update the target HTML manually
    };


    Thanks
    Rajat
  2. #2
    Hi

    Try looking at the source code of Ext.view.DragZone and Ext.view.DropZone and then look at the Ext.grid.ViewDropZone for handling of removing/inserting records.

    http://docs.sencha.com/extjs/4.2.1/s...d-ViewDropZone

    Hope this helps!
    Last edited by glenh; Sep 03, 2013 at 2:47 AM.
  3. #3
    Hello glenh

    Thanks for the reply.Actually i looked at drag zone and drop zone, and added something fo mine

    <ext:DragZone ID="DragZone1" runat="server" Target="={#{ImageView}.getEl()}">
    <GetDragData Fn="getDragData" />
    <GetRepairXY Fn="getRepairXY" />
    </ext:DragZone>

    <ext:DropZone ID="DropZone1" runat="server" Target="={#{dvDroppedImage}.getEl()}">

    <GetTargetFromEvent Fn="getTargetFromEvent" />
    <OnNodeEnter Fn="onNodeEnter" />
    <OnNodeOut Fn="onNodeOut" />
    <OnNodeOver Fn="onNodeOver" />
    <OnNodeDrop Handler="X.NodePredefinedImageDrop(data);" />

    OnNode drop i am doing a DirectMethod


    Dragzone is :
    <ext:DataView ID="ImageView" runat="server" SimpleSelect="true" OverItemCls="x-it......

    Dropzone is
    <ext:DataView Cls="hospital-target images-view"
    ID="dvDroppedImage"
    runat="server"
    SimpleSelect="true" SelectedIndex="0"

    and on 'NodeDrop' just load the store of the dropzone dataview

Similar Threads

  1. [CLOSED] DataView Drag & Drop
    By softmachine2011 in forum 2.x Legacy Premium Help
    Replies: 12
    Last Post: Apr 12, 2013, 11:30 AM
  2. [CLOSED] DataView to DataView Drag and Drop
    By paulc in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: May 10, 2012, 8:19 PM
  3. Drag and drop reordering in Dataview
    By jophinm in forum 1.x Help
    Replies: 2
    Last Post: Nov 11, 2011, 11:19 AM
  4. [CLOSED] Drag-Drop From DataView to TreePanel
    By juanpablo.belli@huddle.com.ar in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 11, 2009, 6:46 AM

Tags for this Thread

Posting Permissions