[CLOSED] how to save records to database after drag and drop in treepanel?

Code:

---

<ext:TreePanel runat="server" ID="menu_tp" RootVisible="true">
            <TopBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:Button runat="server" Text="确认" Icon="Disk">
                            <DirectEvents>

                                <Click OnEvent="SaveClick">
                                    <ExtraParams>
                                        <ext:Parameter Name="data" Value="#{menu_store}.getChangedData()" Mode="Raw" Encode="true" />
                                    </ExtraParams>

                                </Click>
                            </DirectEvents>
                        </ext:Button>
                    </Items>
                </ext:Toolbar>

            </TopBar>
            <Store>
                <ext:TreeStore runat="server" ID="menu_store">
                    <Root>
                        <ext:Node Text="根菜单" Expanded="True">
                            <CustomAttributes>
                                <ext:ConfigItem Name="id" Value="-1" runat="server" />
                                <ext:ConfigItem Name="name" Value="根菜单" runat="server" />
                                <ext:ConfigItem Name="pid" Value="-1" runat="server" />
                                <ext:ConfigItem Name="url" Value="" runat="server" />
                            </CustomAttributes>

                        </ext:Node>

                    </Root>
                    <Proxy>
                        <ext:AjaxProxy Url="../handlers/Handler_menu1.ashx">
                        </ext:AjaxProxy>
                    </Proxy>
                    <Model>
                        <ext:Model runat="server" IDProperty="id">
                            <Fields>
                                <ext:ModelField runat="server" Name="id"></ext:ModelField>
                                <ext:ModelField runat="server" Name="name"></ext:ModelField>
                                <ext:ModelField runat="server" Name="pid"></ext:ModelField>
                                <ext:ModelField runat="server" Name="url"></ext:ModelField>
                            </Fields>
                        </ext:Model>
                    </Model>
                    <Listeners>
                        <Load Handler="#{menu_tp}.view.refresh();"></Load>
                    </Listeners>

                </ext:TreeStore>
            </Store>
            <ColumnModel>
                <Columns>
                    <ext:Column runat="server" Text="编号" DataIndex="id"></ext:Column>
                    <ext:TreeColumn runat="server" Text="名称" DataIndex="name" Flex="1">
                        <Editor>
                            <ext:TextField runat="server"></ext:TextField>
                        </Editor>
                    </ext:TreeColumn>
                    <ext:Column runat="server" Text="url" DataIndex="url" Flex="1">
                        <Editor>
                            <ext:TextField ID="TextField1" runat="server"></ext:TextField>
                        </Editor>
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <Plugins>
                <ext:CellEditing runat="server"></ext:CellEditing>
            </Plugins>
            <View>
                <ext:TreeView ID="TreeView1" runat="server">
                    <Plugins>
                        <ext:TreeViewDragDrop ID="TreeViewDragDrop1" runat="server" />
                    </Plugins>
                </ext:TreeView>
            </View>
        </ext:TreePanel>

---

Code:

---

protected void SaveClick(object sender, DirectEventArgs e)
        {

            ChangeRecords<ExtDemoEf.menu> menues = new StoreDataHandler(e.ExtraParams["data"]).BatchObjectData<ExtDemoEf.menu>();
            foreach (ExtDemoEf.menu created in menues.Created)
            {
            }
            foreach (ExtDemoEf.menu deleted in menues.Deleted)
            {
            }
            foreach (ExtDemoEf.menu updated in menues.Updated)
            {
                menuService.Update(updated);
            }
          // Ext.Net.X.Js.AddScript(this.menu_tp.ClientID + ".getStore().reload();");
            menu_store.Reload();
        }

---

can drag and drop and drop the leaf node to unleaf node. but how to update the field "pid" to parent's node's id?
after drag and drop, how to get current node's parent id in codebehind?

Hi @hdsoso,

You can use a TreeView's Drop DirectEvent and pass a parent node's id as an extra parameter.
http://docs.sencha.com/extjs/4.2.1/#...rop-event-drop

Quote:

---

Originally Posted by Daniil

Hi @hdsoso,

You can use a TreeView's Drop DirectEvent and pass a parent node's id as an extra parameter.
http://docs.sencha.com/extjs/4.2.1/#...rop-event-drop

---

it's DirectEvent not DirectListner?

Hello!

You can use either DirectMethod or DirectEvent. But you should submit required IDs.

Quote:

---

Originally Posted by Baidaly

Hello!

You can use either DirectMethod or DirectEvent. But you should submit required IDs.

---

http://docs.sencha.com/extjs/4.2.1/#...rop-event-drop
can do with directlistner,
but how to do with direct Event? how to get destination note id with direct Event?
do you have an example?

Do you mean a DirectMethod under "directlistner"? Please demonstrate how you did it and we will be happy to port your code using a DirectEvent.

drag and drop is ok now , drag leaf node a to not leaf node b
eg:
b----
|
c
a
now I drag a under b.
after drag
b---
|
c
|
a
how to get b's id and set a's parent id is b's id?
do you have an example? both through direct lisenter or directevent is ok.

Code:

---

<script>
        function l_drop( node, data, overModel, dropPosition, eOpts ) {
            alert('ssss');  //here how to get destination node's id and current draged node's id,name,pid and url?
        }
    </script>
<View>
                <ext:TreeView ID="TreeView1" runat="server">
                    <Plugins>
                        <ext:TreeViewDragDrop ID="TreeViewDragDrop1" runat="server"></ext:TreeViewDragDrop>
                    </Plugins>
                   
                    <Listeners>
                        <Drop Fn="l_drop"></Drop>
                    </Listeners>
                </ext:TreeView>
            </View>

---

Hope this helps.

Code:

---

function l_drop (node, data, overModel, dropPosition, eOpts) {
    alert("Destination node: " + data.records[0].getId());
    alert("Target node: " + overModel.getId());

    // access a node's properties using the get method, e.g.:
    // data.records[0].get("name")
    // overModel.get("pid")
}

---