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

  1. #1

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

    <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>
    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?
    Last edited by Daniil; Jun 11, 2013 at 4:25 AM. Reason: [CLOSED]
  2. #2
    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
  3. #3
    Quote Originally Posted by Daniil View Post
    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?
  4. #4
    Hello!

    You can use either DirectMethod or DirectEvent. But you should submit required IDs.
  5. #5
    Quote Originally Posted by Baidaly View Post
    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?
  6. #6
    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.
  7. #7
    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.
  8. #8
    <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>
  9. #9
    Hope this helps.

    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")
    }

Similar Threads

  1. Drag Drop events in TreePanel
    By web4u in forum 2.x Help
    Replies: 0
    Last Post: Aug 08, 2012, 6:31 AM
  2. Replies: 4
    Last Post: Jun 08, 2012, 10:05 AM
  3. TreePanel - Drag & Drop
    By jigpatel06 in forum 1.x Help
    Replies: 0
    Last Post: Oct 19, 2010, 10:31 AM
  4. [CLOSED] TreePanel Drag and Drop
    By davidhoyt in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 28, 2009, 5:24 AM

Posting Permissions