[CLOSED] how to add a child node to the selected tree node

  1. #1

    [CLOSED] how to add a child node to the selected tree node

    using ExtDemoEf;
    using dto.hdsoso.com;
    using Ext.Net;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace extdemo.pages
    {
        public partial class menu : System.Web.UI.Page
        {
            MenuService menuService = new MenuService();
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
            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();
            }
            [DirectMethod]
            public void SetRoot(int fromid, int toid)
            {
                menuService.SetRoot(fromid,toid);
                menu_store.Reload();
            }
            [DirectMethod]
            public void DeleteNode(int nid)
            {
                menuService.DeleteNode(nid);
            }
        }
    }
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="menu.aspx.cs" Inherits="extdemo.pages.menu" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script>
            function l_drop(node, data, overModel, dropPosition, eOpts) {
                var dragfrom_id = data.records[0].getId();
                var dragto_id = overModel.getId();
                App.direct.SetRoot(dragfrom_id, dragto_id);
            }
            var showMenu = function (view, node, item, index, e) {
                var menu = App.TreeContextMenu;
                this.menuNode = node;
                menu.nodeName = node.get("name");
                view.getSelectionModel().select(node);
                menu.showAt([e.getXY()[0], e.getXY()[1] + 10]);
                e.stopEvent();
            };
            function rmnode() {
                
                var nid = App.menu_tp.menuNode.get("id");
                var title = '消息';
                var msg = '确定要删除吗?';
    
                Ext.Msg.confirm(title, msg, function (btn) {
                    if (btn == 'yes') {
                        App.menu_tp.removeNode(App.menu_tp.menuNode);
                        App.direct.DeleteNode(nid);
                        return true;
                    } else {
                        return false;
                    }
                });
            }
    
            function addNode(){
               // App.menu_tp.appendChild(App.menu_tp.menuNode, 'New');
               // here I want to add a child node with text "new node text" to the selected node of context menu.
               // App.menu_tp.appendChild(App.menu_tp.menuNode, {name:'new node'});???
               //  or App.menu_store.insert(App.menu_tp.menuNode,{name:'new node'});???? but I find there is no insert mthod in the docs of extjs?
               // how to do?
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager runat="server"></ext:ResourceManager>
            <ext:Menu ID="TreeContextMenu" runat="server">
                <Items>
                    <ext:Label ID="NodeName" runat="server" Cls="bold-text" />
                    <ext:MenuSeparator />
                    <ext:MenuItem ID="MenuItem4" runat="server" Text="新增" Icon="Add">
                        <Listeners>
                            <Click Fn="addNode" />
                        </Listeners>
                    </ext:MenuItem>
                    <ext:MenuItem ID="MenuItem3" runat="server" Text="删除" Icon="Delete">
                        <Listeners>
                            <Click Fn="rmnode" />
                        </Listeners>
                    </ext:MenuItem>
    
    
    
    
                </Items>
                <Listeners>
                    <Show Handler="#{NodeName}.setText(this.nodeName);" />
                </Listeners>
            </ext:Menu>
            <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>
                            <ext:Button runat="server" Text="刷新" Icon="ArrowRefresh">
                                <Listeners>
                                    <Click Handler="window.location='menu.aspx';"></Click>
                                </Listeners>
                            </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" AppendOnly="true"></ext:TreeViewDragDrop>
                        </Plugins>
    
                        <Listeners>
                            <Drop Fn="l_drop"></Drop>
                        </Listeners>
                    </ext:TreeView>
                </View>
                <Listeners>
                    <ItemContextMenu Fn="showMenu" StopEvent="true" />
                    <RemoteActionRefusal Handler="Ext.Msg.alert('Action refusal', e.message);" />
                </Listeners>
            </ext:TreePanel>
        </form>
    </body>
    </html>
    please note: js function addNode
    Last edited by Daniil; Jun 25, 2013 at 7:48 AM. Reason: [CLOSED]
  2. #2
    Hi @hdsoso,

    Please use a node's appendchild and insertChild methods.
    http://docs.sencha.com/extjs/4.2.1/#...od-appendChild
    http://docs.sencha.com/extjs/4.2.1/#...od-insertChild

    Example
    node.appendChild({ name: "new node" })
    So, in your case the following should work.
    App.menu_tp.menuNode.appendChild({ name:'new node' });
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi @hdsoso,

    Please use a node's appendchild and insertChild methods.
    http://docs.sencha.com/extjs/4.2.1/#...od-appendChild
    http://docs.sencha.com/extjs/4.2.1/#...od-insertChild

    Example
    node.appendChild({ name: "new node" })
    So, in your case the following should work.
    App.menu_tp.menuNode.appendChild({ name:'new node' });
    I want to use batch add feature, code below, but convert error.
    App.menu_tp.menuNode.appendChild({ id:-1, name: '新菜单', leaf: "true" });
    <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>
            protected void SaveClick(object sender, DirectEventArgs e)
            {
    
                ChangeRecords<ExtDemoEf.menu> menues = new StoreDataHandler(e.ExtraParams["data"]).BatchObjectData<ExtDemoEf.menu>();
    when batch add, convert error
    Click image for larger version. 

Name:	1.jpg 
Views:	15 
Size:	50.1 KB 
ID:	6396
    Last edited by hdsoso; Jun 17, 2013 at 11:19 PM.
  4. #4
    Hello!

    This error means that you send wrong and no value for pid. Double check what you send. And why you don't set pid value here:
    App.menu_tp.menuNode.appendChild({ id:-1, name: '新菜单', leaf: "true" });
    Also, I would set explicit type for this field:
    <ext:ModelField runat="server" Name="pid" Type="Int"></ext:ModelField>

Similar Threads

  1. Add tree node via javascript from child window
    By cicaglisa in forum 1.x Help
    Replies: 25
    Last Post: Apr 26, 2013, 3:33 PM
  2. Tree view selected node event
    By chinninani in forum 2.x Help
    Replies: 1
    Last Post: Jan 22, 2013, 11:15 AM
  3. Replies: 0
    Last Post: Aug 09, 2012, 8:30 AM
  4. Replies: 16
    Last Post: Jul 19, 2011, 3:53 AM
  5. Selected Node - tree panel
    By filipator in forum 1.x Help
    Replies: 3
    Last Post: Mar 25, 2009, 2:58 PM

Posting Permissions