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('#', '&_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].contentdocument.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