[CLOSED] TreePanel state: re-select node after refresh

  1. #1

    [CLOSED] TreePanel state: re-select node after refresh

    Hi

    I bang into this many times with no success. I am trying to keep the select state of the node being refreshed based on a silimilar solution posted here.

    I can see the example works to mantain the expanded state of the nodes, but also after refresh I wish to re-select the node if it is possible. The problem is that by using the "reload()" fuction the node loses its reference to the "owner tree - getOwnerTree()".

    The node id will not change and I can easily store the id of the currently selected node, but after reload, when trying to use: "tree.getNodeById(selNodeId)" it will not return the node anymore.

    I could see some discussion about use the State Manager.

    I am still using 0.8.2, and the mentioned solution would work for me to keep the expanded nodes. All I need it to keep the selected node as well.

    Any ideas?

    Leo

  2. #2

    RE: [CLOSED] TreePanel state: re-select node after refresh

    Hi,

    but
    after reload, when trying to use: "tree.getNodeById(selNodeId)" it will
    not return the node anymore.

    Do you use async loading for each node (each node initiate request to load owjn children)? If yes then you have to search the node after parent node children loading only.

    If you provide test sample I will try to change it
  3. #3

    RE: [CLOSED] TreePanel state: re-select node after refresh

    Hi Vlad,


    Yes, I am using Async TreeLoader for each node.
    I did not quite understand your suggestion, but here goes the sample you asked:

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>TreePanel with Async TreeLoader using Page - Coolite Toolkit Examples</title>
    
        <script type="text/javascript">
            function refreshTree(tree) {
                if (!tree) {
                    var activeItem = Ext.getCmp('PanelWest').layout.activeItem.findByType('coolitetreepanel');
                    if (activeItem.length > 0)
                        tree = activeItem[0];
                }
    
                var expNodes = [];
                tree.getRootNode().cascade(function(node) {
                    if (node.isExpanded()) {
                        expNodes.push(node.id);
                    }
                });
    
                if (tree.getSelectionModel().getSelectedNode() != null) {
                    var selNode = tree.getSelectionModel().getSelectedNode();
                    var selNodeId = selNode.id;
                    if (selNode.parentNode == null)
                        selNode.reload();
                    else
                        selNode.parentNode.reload();
    
                    for (var i = 0, l = expNodes.length; i < l; i++) {
                        var node = tree.getNodeById(expNodes[i]);
                        if (node) {
                            node.expand(false, false);
                        }
                    }
    
                    var node = tree.getNodeById(selNodeId);
                    if (node)
                        node.select();
                }
            } 
        </script>
    
        <script runat="server">
            protected void NodeLoad(object sender, NodeLoadEventArgs e)
            {
                string prefix = e.ExtraParams["prefix"] ?? "";
                if (!string.IsNullOrEmpty(e.NodeID))
                {
                    for (int i = 1; i < 6; i++)
                    {
                        AsyncTreeNode asyncNode = new AsyncTreeNode();
                        asyncNode.Text = prefix + e.NodeID + i;
                        asyncNode.NodeID = e.NodeID + i;
                        e.Nodes.Add(asyncNode);
                    }
    
                    for (int i = 6; i < 11; i++)
                    {
                        Coolite.Ext.Web.TreeNode treeNode = new Coolite.Ext.Web.TreeNode();
                        treeNode.Text = prefix + e.NodeID + i;
                        treeNode.NodeID = e.NodeID + i;
                        treeNode.Leaf = true;
                        e.Nodes.Add(treeNode);
                    }
                }
            }
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" />
        <ext:Panel ID="Panel1" runat="server" Height="300" Title="Title">
            <Body>
                <h1>
                    TreePanel using PageTreeLoader</h1>
                <p>
                    Set custom node prefix:
                </p>
                <ext:TextField ID="TextField1" runat="server" Text="Node" />
                <ext:TreePanel ID="TreePanel1" runat="server" Title="Tree" AutoHeight="true" Border="false">
                    <Loader>
                        <ext:PageTreeLoader OnNodeLoad="NodeLoad">
                            <BaseParams>
                                <ext:Parameter Name="prefix" Value="#{TextField1}.getValue()" Mode="Raw" />
                            </BaseParams>
                        </ext:PageTreeLoader>
                    </Loader>
                    <Root>
                        <ext:AsyncTreeNode NodeID="0" Text="Root" />
                    </Root>
                    <Tools>
                        <ext:Tool Type="Refresh" Qtip="Refresh" Handler="refreshTree(#{TreePanel1});" />
                    </Tools>
                </ext:TreePanel>
            </Body>
        </ext:Panel>
        </form>
    </body>
    </html>

    Your help is much appreciated.

    Regards,
    Leo
  4. #4

    RE: [CLOSED] TreePanel state: re-select node after refresh

    Hi Vlad, sorry I forgot to mention one important thing:

    In the sample I just sent, I am refreshing the parentNode when it is present, because reload() will load again the children and not the current selected node and it may have changed its Text property. If you have a better solution for this, please let me know because ideally I don't want to refresh the parent node. I need only fresh the node that is selected, incluing its text property.

    Regards,
    Leo
  5. #5

    RE: [CLOSED] TreePanel state: re-select node after refresh

    Hi,

    Please see the following sample
    
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>TreePanel with Async TreeLoader using Page - Coolite Toolkit Examples</title>
    
        <script type="text/javascript">
            function refreshTree(tree) {
                if (!tree) {
                    var activeItem = Ext.getCmp('PanelWest').layout.activeItem.findByType('coolitetreepanel');
                    if (activeItem.length > 0)
                        tree = activeItem[0];
                }
    
                
    
                if (tree.getSelectionModel().getSelectedNode() != null) {
                    var selNode = tree.getSelectionModel().getSelectedNode();
                    var selNodeId = selNode.id;
                    
                    tree.expNodes = [];
                    selNode.cascade(function(node) {
                        if (node.isExpanded()) {
                            tree.expNodes.push(node.id);
                        }
                    });
                    
                    
                    selNode.reload();
    
     
                    var i = 0;
                    while(i < tree.expNodes.length){
                        var node = tree.getNodeById(tree.expNodes[i]);
                        if (node) {
                            tree.expNodes.remove(tree.expNodes[i]);
                            node.expand(false, false);
                        }
                        else{
                            i++;
                        }
                    }
    
                    var node = tree.getNodeById(selNodeId);
                    if (node)
                        node.select();
                }
            } 
            
            function nodeExpanded(){
                var i = 0;
                this.expNodes = this.expNodes || [];
                while(i < this.expNodes.length){
                    var node = this.getNodeById(this.expNodes[i]);
                    if (node) {
                        this.expNodes.remove(this.expNodes[i]);
                        node.expand(false, false);
                    }
                    else{
                        i++;
                    }
                }
            }
        </script>
    
        <script runat="server">
            protected void NodeLoad(object sender, NodeLoadEventArgs e)
            {
                string prefix = e.ExtraParams["prefix"] ?? "";
                if (!string.IsNullOrEmpty(e.NodeID))
                {
                    for (int i = 1; i < 6; i++)
                    {
                        AsyncTreeNode asyncNode = new AsyncTreeNode();
                        asyncNode.Text = prefix + e.NodeID + i;
                        asyncNode.NodeID = e.NodeID + i;
                        e.Nodes.Add(asyncNode);
                    }
    
                    for (int i = 6; i < 11; i++)
                    {
                        Coolite.Ext.Web.TreeNode treeNode = new Coolite.Ext.Web.TreeNode();
                        treeNode.Text = prefix + e.NodeID + i;
                        treeNode.NodeID = e.NodeID + i;
                        treeNode.Leaf = true;
                        e.Nodes.Add(treeNode);
                    }
                }
    
                TreePanel1.AddScript("{0}.getNodeById({1}).setText({2});", TreePanel1.ClientID, JSON.Serialize(e.NodeID), JSON.Serialize("Node Time: "+DateTime.Now.ToLongTimeString()));
            }
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" />
        <ext:Panel ID="Panel1" runat="server" Height="600" Title="Title">
            <Body>
                <h1>
                    TreePanel using PageTreeLoader</h1>
                <p>
                    Set custom node prefix:
                </p>
                <ext:TextField ID="TextField1" runat="server" Text="Node" />
                <ext:TreePanel ID="TreePanel1" runat="server" Title="Tree" AutoHeight="true" Border="false">
                    <Loader>
                        <ext:PageTreeLoader OnNodeLoad="NodeLoad">
                            <BaseParams>
                                <ext:Parameter Name="prefix" Value="#{TextField1}.getValue()" Mode="Raw" />
                            </BaseParams>
                        </ext:PageTreeLoader>
                    </Loader>
                    <Root>
                        <ext:AsyncTreeNode NodeID="0" Text="Root" />
                    </Root>
                    <Tools>
                        <ext:Tool Type="Refresh" Qtip="Refresh" Handler="refreshTree(TreePanel1);" />
                    </Tools>
                    <Listeners>
                        <ExpandNode Fn="nodeExpanded" />
                    </Listeners>
                </ext:TreePanel>
            </Body>
        </ext:Panel>
        </form>
    </body>
    </html>
    You use AsyncTree therefore we have to wait node expanding(loading) before expand children nodes
  6. #6

    RE: [CLOSED] TreePanel state: re-select node after refresh

    Hi Vlad,

    Thank you very much for the sample provided. Much appreciated. It solved the problem of keep the selected record as well as the expanded. However the only problem is still to refresh the current node. As far as I understand, the reload() will call the Async loader in order to refresh child nodes and it will not refresh the node that the loader was called.

    So, because the node will not be refreshed, you put the following:

    
    TreePanel1.AddScript("{0}.getNodeById({1}).setText({2});", TreePanel1.ClientID, JSON.Serialize(e.NodeID), JSON.Serialize("Node Time: "+DateTime.Now.ToLongTimeString()));
    I understand it is only a sample to show that the node is been refresh, but it will not work for me.

    Imagine you have a Node called "Companies". Under Companies you have child nodes with each Company name.

    Imagine you are in the screen to actually change a company's name that you have currently selected. The Tree is on my West region and the Company Entry screen is on Center Region iframe. So if there is no way to really reload the current node, the only way I see is to keep the updated record in a session or something and when the node is refreshed I would have that value.

    Is difficult to explain, I am not sure you will understand what I am saying, but basically what I am saying is that your solution works, but when I replace

    "Node Time: "+DateTime.Now.ToLongTimeString()
    To my real value I will not have this value unless I realod the parent or keep the most updated record in a session.

    Can you understand what I am saying? Would you have another suggestion?

    Thanks
    Leo
  7. #7

    RE: [CLOSED] TreePanel state: re-select node after refresh

    Hi,

    Can you explain what is mean 'refresh node'? As I understand, can be refreshed children (you can do it), text (you can do it using AddScript from my example) or attributes (you can do it using the same approach as with text)


    Can you provide more details what problems do you have with refresh a node?
  8. #8

    RE: [CLOSED] TreePanel state: re-select node after refresh

    Hi Vlad,

    By 'refresh node' I mean the Loader execution that in my case goes to the database and retrieve the node info.
    In the sample we are working on, it is a loop (for...) and that is a fake scenario for the sake of simplicity.

    Exactly this:

    <Loader>
        <ext:PageTreeLoader OnNodeLoad="NodeLoad">
        </ext:PageTreeLoader>
    </Loader>
    protected void NodeLoad(object sender, NodeLoadEventArgs e)
    {
    
    }
    Manually set a node id and text is not a real "reload or refresh" because originally they are loaded from database when parent call them.

    I meant the parent knows how to load children and that is what happens.
    Sorry if it is my confusion and maybe the child should not really know how to load itself.

    So, forgive if it is my confusion and lets work with a different approach.
    Can you please have a look at the following sample:

    TreePanelRefreshWithViewPort:
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>TreePanel with Async TreeLoader using Page - Coolite Toolkit Examples</title>
    
        <script type="text/javascript">
    
            var addTab = function(tbPanelName, tabName, id, url) {
                var tabPanel = null;
                if (window.parent.Ext != null) {
                    tabPanel = window.parent.Ext.getCmp(tbPanelName);
                } else {
                    tabPanel = Ext.getCmp(tbPanelName);
                }
    
                var tab = tabPanel.getItem(id);
                if (!tab) {
                    tab = tabPanel.add({
                        id: id,
                        title: tabName,
                        closable: true,
                        header: false,
                        autoLoad: {
                            showMask: true,
                            url: url,
                            mode: 'iframe',
                            maskMsg: 'Loading ' + tabName + '...'
                        }
     
                    });
                }
                else {
                    url2 = url.replace('#', '&amp;_dc=' + new Date().getTime() + '#');
                    tab.loadIFrame(url2);
                }
                tabPanel.setActiveTab(tab);
            }    
        
            function refreshTree(tree) {
                if (!tree) {
                    var activeItem = Ext.getCmp('PanelWest').layout.activeItem.findByType('coolitetreepanel');
                    if (activeItem.length > 0)
                        tree = activeItem[0];
                }
    
                if (tree.getSelectionModel().getSelectedNode() != null) {
                    var selNode = tree.getSelectionModel().getSelectedNode();
                    var selNodeId = selNode.id;
    
                    tree.expNodes = [];
                    selNode.cascade(function(node) {
                        if (node.isExpanded()) {
                            tree.expNodes.push(node.id);
                        }
                    });
    
    
                    selNode.reload();
    
    
                    var i = 0;
                    while (i < tree.expNodes.length) {
                        var node = tree.getNodeById(tree.expNodes[i]);
                        if (node) {
                            tree.expNodes.remove(tree.expNodes[i]);
                            node.expand(false, false);
                        }
                        else {
                            i++;
                        }
                    }
    
                    var node = tree.getNodeById(selNodeId);
                    if (node)
                        node.select();
                }
            }
    
            function nodeExpanded() {
                var i = 0;
                this.expNodes = this.expNodes || [];
                while (i < this.expNodes.length) {
                    var node = this.getNodeById(this.expNodes[i]);
                    if (node) {
                        this.expNodes.remove(this.expNodes[i]);
                        node.expand(false, false);
                    }
                    else {
                        i++;
                    }
                }
            }
        </script>
    
        <script runat="server">
            protected void NodeLoad(object sender, NodeLoadEventArgs e)
            {
                string prefix = e.ExtraParams["prefix"] ?? "";
                if (!string.IsNullOrEmpty(e.NodeID))
                {
                    for (int i = 1; i < 6; i++)
                    {
                        AsyncTreeNode asyncNode = new AsyncTreeNode();
                        asyncNode.Text = prefix + e.NodeID + i;
                        asyncNode.NodeID = e.NodeID + i;
                        e.Nodes.Add(asyncNode);
                    }
    
                    for (int i = 6; i < 11; i++)
                    {
                        Coolite.Ext.Web.TreeNode treeNode = new Coolite.Ext.Web.TreeNode();
                        treeNode.Text = prefix + e.NodeID + i;
                        treeNode.NodeID = e.NodeID + i;
                        treeNode.Leaf = true;
                        e.Nodes.Add(treeNode);
                    }
                }
    
                TreePanel1.AddScript("{0}.getNodeById({1}).setText({0}.getNodeById({1}).text + ' ' + {2});", TreePanel1.ClientID, JSON.Serialize(e.NodeID), JSON.Serialize(DateTime.Now.ToLongTimeString()));
            }
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" />
        <ext:ViewPort ID="ViewPort1" runat="server">
            <Body>
                <ext:BorderLayout ID="BorderLayout1" runat="server">
                    <North Collapsible="True" Split="True">
                        <ext:Panel ID="Panel2" runat="server" Height="100" Title="North">
                            <Body>
                            </Body>
                        </ext:Panel>
                    </North>
                    <East Collapsible="true" Split="true">
                        <ext:Panel ID="Panel3" runat="server" Title="East" Width="175">
                            <Body>
                                <ext:FitLayout ID="FitLayout1" runat="server">
                                    <ext:TabPanel ID="TabPanel1" runat="server" ActiveTabIndex="0" Border="false" TabPosition="Bottom"
                                        Title="Title">
                                        <Tabs>
                                            <ext:Tab ID="Tab1" runat="server" Title="Tab 1">
                                                <Body>
                                                </Body>
                                            </ext:Tab>
                                            <ext:Tab ID="Tab2" runat="server" Title="Tab 2">
                                                <Body>
                                                </Body>
                                            </ext:Tab>
                                        </Tabs>
                                    </ext:TabPanel>
                                </ext:FitLayout>
                            </Body>
                        </ext:Panel>
                    </East>
                    <South Collapsible="true" Split="true">
                        <ext:Panel ID="Panel4" runat="server" Height="100" Title="South">
                            <Body>
                            </Body>
                        </ext:Panel>
                    </South>
                    <West Collapsible="true" Split="true">
                        <ext:Panel ID="PanelWest" runat="server" Title="West" Width="175">
                            <Body>
                                <ext:Accordion ID="Accordion1" runat="server" Animate="true">
                                    <ext:Panel ID="Panel6" runat="server" Border="false" Collapsed="True" Icon="FolderGo"
                                        Title="Item 1">
                                        <Body>
                                            <ext:TextField ID="TextField1" runat="server" Text="Node" />
                                            <ext:TreePanel ID="TreePanel1" runat="server" Title="Tree" AutoHeight="true" Border="false">
                                                <Loader>
                                                    <ext:PageTreeLoader OnNodeLoad="NodeLoad">
                                                        <BaseParams>
                                                            <ext:Parameter Name="prefix" Value="#{TextField1}.getValue()" Mode="Raw" />
                                                        </BaseParams>
                                                    </ext:PageTreeLoader>
                                                </Loader>
                                                <Root>
                                                    <ext:AsyncTreeNode NodeID="0" Text="Root" />
                                                </Root>
                                                <Tools>
                                                    <ext:Tool Type="Refresh" Qtip="Refresh" Handler="refreshTree(TreePanel1);" />
                                                </Tools>
                                                <Listeners>
                                                    <ExpandNode Fn="nodeExpanded" />
                                                    <Click Handler="addTab(#{TabPanelMain}.id,node.text,node.text,'FormPanelTest2.aspx?node=' + node.text)" />
                                                </Listeners>
                                            </ext:TreePanel>
                                        </Body>
                                    </ext:Panel>
                                    <ext:Panel ID="Panel7" runat="server" Border="false" Collapsed="true" Icon="FolderWrench"
                                        Title="Item 2">
                                        <Body>
                                        </Body>
                                    </ext:Panel>
                                </ext:Accordion>
                            </Body>
                        </ext:Panel>
                    </West>
                    <Center>
                        <ext:Panel ID="Panel8" runat="server" Title="Center">
                            <Body>
                                <ext:FitLayout ID="FitLayout2" runat="server">
                                    <ext:TabPanel ID="TabPanelMain" runat="server" ActiveTabIndex="0" Border="false" Title="Center">
                                        <Tabs>
                                            <ext:Tab ID="Tab3" runat="server" Closable="true" Title="Tab 1">
                                                <%--<AutoLoad Url="FormPanelTest2.aspx" Mode="IFrame" NoCache="true" DiscardUrl="true" />--%>
                                            </ext:Tab>
                                            <ext:Tab ID="Tab4" runat="server" Title="Tab 2">
                                                <Body>
                                                </Body>
                                            </ext:Tab>
                                        </Tabs>
                                    </ext:TabPanel>
                                </ext:FitLayout>
                            </Body>
                        </ext:Panel>
                    </Center>
                </ext:BorderLayout>
            </Body>
        </ext:ViewPort>
        </form>
    </body>
    </html>
    FormPanelTest2.aspx:
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Only FormPanel - From Coolite Toolkit Examples</title>
        
    
        <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
                TextFieldName.Text = Request["node"].ToString();
            }
    
            protected void SaveClick(object sender, Coolite.Ext.Web.AjaxEventArgs e)
            { 
                //TODO Save...
            }        
        </script>
    
        <script type="text/javascript">
            function refreshTree(tree) {
                if (!tree) {
                    if (window.parent.Ext != null) {
                            tree = window.parent.Ext.getCmp('TreePanel1');
                    }
                }
    
                if (tree.getSelectionModel().getSelectedNode() != null) {
                    var selNode = tree.getSelectionModel().getSelectedNode();
                    var selNodeId = selNode.id;
    
                    tree.expNodes = [];
                    selNode.cascade(function(node) {
                        if (node.isExpanded()) {
                            tree.expNodes.push(node.id);
                        }
                    });
    
    
                    selNode.reload();
    
    
                    var i = 0;
                    while (i < tree.expNodes.length) {
                        var node = tree.getNodeById(tree.expNodes[i]);
                        if (node) {
                            tree.expNodes.remove(tree.expNodes[i]);
                            node.expand(false, false);
                        }
                        else {
                            i++;
                        }
                    }
    
                    var node = tree.getNodeById(selNodeId);
                    if (node)
                        node.select();
                }
            }
    
            function nodeExpanded() {
                var i = 0;
                this.expNodes = this.expNodes || [];
                while (i < this.expNodes.length) {
                    var node = this.getNodeById(this.expNodes[i]);
                    if (node) {
                        this.expNodes.remove(this.expNodes[i]);
                        node.expand(false, false);
                    }
                    else {
                        i++;
                    }
                }
            }
        </script>   
        
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug" />
        <ext:Panel ID="Panel1" runat="server" Width="800" Height="600">
            <Body>
                <ext:FormPanel ID="FormPanel1" runat="server" BodyStyle="padding:5px;" ButtonAlign="Right"
                    Frame="true" Height="185" Title="Title" Width="300">
                    <Body>
                        <ext:FormLayout ID="FormLayout1" runat="server">
                            <ext:Anchor Horizontal="100%">
                                <ext:TextField ID="TextFieldName" runat="server" FieldLabel="Name">
                                </ext:TextField>
                            </ext:Anchor>
                        </ext:FormLayout>
                    </Body>
                    <Buttons>
                        <ext:Button ID="Button1" runat="server" Icon="Disk" Text="Submit">
                            <AjaxEvents>
                                <Click OnEvent="SaveClick" Success="refreshTree();" Before="return #{FormPanel1}.getForm().isValid();">
                                </Click>
                            </AjaxEvents>
                        </ext:Button>
                    </Buttons>
                    
                </ext:FormPanel>
            </Body>
        </ext:Panel>
        </form>
    </body>
    </html>

    I have done this sample to show roughtly my scenario and I wish to work with your solution: node.setText().

    If you click in a node you will see it will open a new tab in the center area and it will load to the TextFieldName the node text.

    When click "Submit", on Success it will call the refreshTree we've been talking.
    refreshTree will call reload() that calls the NodeLoad and load its children.

    At the last step we have the AddScript:

    TreePanel1.AddScript("{0}.getNodeById({1}).setText({0}.getNodeById({1}).text
     + ' ' + {2});", TreePanel1.ClientID, JSON.Serialize(e.NodeID), 
    JSON.Serialize(DateTime.Now.ToLongTimeString()));

    So my idea is to add to this script the ability to search dom and find the updated node text that is present on TextFieldName.

    My problem is that I don't know how to navigate through the dom to get this value.

    I know if I use the FireBug and hard-code in my real scenario it would be something like:

                Coolite.Ext.Web.Accordion accordion = (Coolite.Ext.Web.Accordion)this.FindControl("Accordion1");
                Coolite.Ext.Web.TreePanel tree = (Coolite.Ext.Web.TreePanel)Coolite.Utilities.ControlUtils.FindChildControl(accordion, "Coolite.Ext.Web.TreePanel", true);            
                
                string textfieldValue = "(Ext.getCmp('" + TabPanelMain.ID + "').activeTab.getActionEl().dom.firstChild.children[0].all) ? Ext.getCmp('" + TabPanelMain.ID + "').activeTab.getActionEl().dom.firstChild.children[0].all[0].content&#100;ocument.getElementById('TextFieldName').value || 'nulo' : 'none'";
                tree.AddScript("{0}.getNodeById({1}).setText({2});debugger;", tree.ClientID, Coolite.Ext.Web.JSON.Serialize(e.NodeID), textfieldValue);
    The tabpanel uses AutoLoad (IFrame) and contentDocument to get the iframe content...

    As you can see on the sample above the index is harcode and getting firstChild, etc....

    What would you suggest me to get TextFieldName ? What would you set as script for textfieldValue shown above?

    Much appreciated for you patience and help

    Regards,
    Leo
  9. #9

    RE: [CLOSED] TreePanel state: re-select node after refresh

    Hi,

    Well just submit text field from iframe with refresh request

    1. Add parameter to the PageTreeLoader (to the BaseParams)
    <ext:Parameter Name="text" Value="getTextFieldName()" Mode="Raw" />
    2. Define function which return text field value
    function getTextFieldName(){
                var tab = TabPanelMain.getActiveTab();
                if(tab &amp;&amp; tab.iframe &amp;&amp; tab.iframe.dom.contentwindow.TextFieldName){
                    return TabPanelMain.getActiveTab().iframe.dom.contentwindow.TextFieldName.getValue();
                }
                
                return "";
            }
    3. Use that value on the server side (e.ExtraParams["text"])

    Alternative way, you can always to update text on the client side in the refreshTree method
    selNode.setText(TextFieldName.getValue());
  10. #10

    RE: [CLOSED] TreePanel state: re-select node after refresh

    Hi Vlad,

    That works like a charm! Fantastic. Thank you very much, indeed!

    Kind Regards,

    Leo

Similar Threads

  1. [CLOSED] TreePanel refresh tree node
    By boris in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 16, 2011, 10:32 AM
  2. Replies: 0
    Last Post: Oct 05, 2011, 9:48 AM
  3. Help! How to get the select node in treepanel?
    By cf981231 in forum 1.x Help
    Replies: 2
    Last Post: Jan 27, 2011, 7:30 AM
  4. [CLOSED] Select node on Treepanel with right click...
    By tjbishop in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Sep 13, 2010, 10:33 PM
  5. Right-click node select in TreePanel?
    By dbassett74 in forum 1.x Help
    Replies: 6
    Last Post: May 14, 2009, 12:17 PM

Posting Permissions