PDA

View Full Version : [CLOSED] Trigger the loading of TreePanelĀ“s data



RCN
May 15, 2012, 2:15 PM
Hi folks, in the following example the load of root node“s content occurs when it is expanded. If i set the rootVisible property to false the "root" nodes are loaded automatically. I would like to know whether it“s possible to control the load of "root" nodes when rootVisible property is set to false. In other works i want that to load the data just when the button "_btn" is clicked, but without show root node.

1 - View


<ext:Button ID="_btn" Text="add" runat="server">
<Listeners>
<Click Handler="doLoad();" />
</Listeners>
</ext:Button>
<ext:TreePanel ID="TreePanel1" runat="server" Title="Tree" Height="500" Width="200"
Border="false">
<Store>
<ext:TreeStore ID="TreeStore1" NodeParam="nodeId" runat="server">
<Proxy>
<ext:AjaxProxy Url="/Example/loadNodeChildren">
<Reader>
<ext:JsonReader Root="data" />
</Reader>
</ext:AjaxProxy>
</Proxy>
</ext:TreeStore>
</Store>
<Root>
<ext:Node NodeID="0" Text="Ext" />
</Root>
</ext:TreePanel>


2 -Controller


public StoreResult loadNodeChildren(string nodeId)
{
NodeCollection nodes = new NodeCollection(false);

if (!string.IsNullOrEmpty(nodeId))
{
for (int i = 1; i < 6; i++)
{
Node asyncNode = new Node();
asyncNode.Text = nodeId + i;
asyncNode.NodeID = nodeId + i;
nodes.Add(asyncNode);
}
}

return new StoreResult { Data = nodes.ToJson() };
}


3 - JavaScript


var doLoad = function () {
//Trigger load
}

RCN
May 15, 2012, 2:34 PM
I could remove the root node from TreePanel


<ext:Button ID="_btn" Text="add" runat="server">
<Listeners>
<Click Handler="doLoad();" />
</Listeners>
</ext:Button>
<ext:TreePanel ID="TreePanel1" runat="server" Title="Tree" Height="500" Width="200"
Border="false">
<Store>
<ext:TreeStore ID="TreeStore1" NodeParam="nodeId" runat="server">
<Proxy>
<ext:AjaxProxy Url="/Example/loadNodeChildren">
<Reader>
<ext:JsonReader Root="data" />
</Reader>
</ext:AjaxProxy>
</Proxy>
</ext:TreeStore>
</Store>
</ext:TreePanel>


And then add it when button _btn is clicked.


var doLoad = function () {
App.TreePanel1.setRootNode({
expanded: true
});
//how to hide the root node?
}


but how to hide the root node?

Daniil
May 15, 2012, 3:06 PM
Hi,

Please set up:

<ext:TreeStore runat="server">
<CustomConfig>
<ext:ConfigItem Name="autoLoad" Value="false" Mode="Raw" />
</CustomConfig>
</ext:TreeStore>

We will review it to allow setting it via the TreeStore AutoLoad property.

RCN
May 15, 2012, 5:07 PM
I did it setting TreePanel“s RootVisible property to false and overriding the Ext.tree.View.setRootNode function, as shown bellow. Then i just set the node of the store when the button _btn is clicked

But your approach is MUCH better


var doLoad = function () {
App.TreePanel1.view.store.setNode(App.TreePanel1.g etRootNode());
}

Ext.tree.View.override({

setRootNode: function (node) {
var me = this;
//me.store.setNode(node);
me.node = node;
if (!me.rootVisible) {
//node.expand();
}
}
});

RCN
May 16, 2012, 11:19 AM
Daniil, please mark as as resolved.

Daniil
May 16, 2012, 11:47 AM
Thanks for the update.

I would prefer to mark the thread as closed after a decision on this aspect:

We will review it to allow setting it via the TreeStore AutoLoad property.

Daniil
May 18, 2012, 5:00 PM
Now you can just set up

<ext:TreeStore runat="server" AutoLoad="false">
instead of using CustomConfig.

Thanks for the question.