Feb 17, 2015, 4:07 PM
[CLOSED] TreePanel, AjaxProxy and "local" node filtering introduces a stack overflow when applying node filtering
Hi,
I need to have a TreePanel with dynamic node loading. However we also need to apply a local node filter (I mean allow the user to insert a text and filter the nodes by this text).
It appears that when nodes are dynamically loaded and a filter is applied client-side, expanding a child node (that requires a callback) introduces a stack overflow when trying to apply the filter to the resulting nodes.
Looking at the details is seems that when the store is preparing to read the nodes it tries to serialize into json the "Filter" object already set on the store (locally) generating a loop.
This is the code required to configure the tree:
Chrome gives the following error "Uncaught RangeError: Maximum call stak size exceeded"
Thank you for help,
I need to have a TreePanel with dynamic node loading. However we also need to apply a local node filter (I mean allow the user to insert a text and filter the nodes by this text).
It appears that when nodes are dynamically loaded and a filter is applied client-side, expanding a child node (that requires a callback) introduces a stack overflow when trying to apply the filter to the resulting nodes.
Looking at the details is seems that when the store is preparing to read the nodes it tries to serialize into json the "Filter" object already set on the store (locally) generating a loop.
This is the code required to configure the tree:
<ext:TreePanel ID="MyTreePanel" runat="server">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:TextField ID="TextField1" runat="server">
<Listeners>
<Change Buffer="500" Handler="filterTree(this);" />
</Listeners>
</ext:TextField>
</Items>
</ext:Toolbar>
</TopBar>
<Root>
<ext:Node NodeID="Root" Expanded="true" Icon="Accept" />
</Root>
<Store>
<ext:TreeStore ID="TreeStore1" runat="server" AutoLoad="false" RemoteFilter="false" RemoteSort="false" FilterOnLoad="false">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="field" Type="String" />
<ext:ModelField Name="description" Type="String" />
<ext:ModelField Name="entity" Type="String" />
<ext:ModelField Name="config" Type="Object" IsComplex="true" />
<ext:ModelField Name="controlConfig" Type="Object" IsComplex="true" />
</Fields>
</ext:Model>
</Model>
<Proxy>
<ext:AjaxProxy Url='<%# Url.Action("MyAction", "MyController")%>' AutoDataBind="true">
<ActionMethods Read="POST"></ActionMethods>
<Reader>
<ext:JsonReader RootProperty="data">
</ext:JsonReader>
</Reader>
</ext:AjaxProxy>
</Proxy>
</ext:TreeStore>
</Store>
</ext:TreePanel>
And this is the script to apply the filter to the tree: <script>
var filterTree = function (textField) {
var text = textField.getValue();
var tree = textField.up('treepanel');
var re = new RegExp(".*" + text + ".*", "i");
tree.getStore().filterBy(function (node) {
var visible = re ? re.test(node.data.text) : true;
return visible;
});
};
</script>
Chrome gives the following error "Uncaught RangeError: Maximum call stak size exceeded"
Thank you for help,
Last edited by Daniil; Feb 25, 2015 at 9:24 AM.
Reason: [CLOSED]