Aug 06, 2019, 4:42 PM
[CLOSED] TreePanel filtereing Bug
I have a nested treepanel nodes that continues to display empty parent nodes.
Clicking on the expansion icon on any of the empty parent nodes properly hide the empty parents:
Thank you.
Clicking on the expansion icon on any of the empty parent nodes properly hide the empty parents:
<%@ Page Language="C#" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
var searchFilter = function ()
{
debugger;
var tree = App.TreePanel1;
var field = App.searchField;
var text = field.getValue();
if (Ext.isEmpty(text, false)) {
field.clear();
return;
}
var re = '';
if (text.match(/^-{0,1}\d+$/)) {
re = new RegExp(text);
}
else {
re = new RegExp(".*" + text + ".*", "i");
var re_split = text.split(/\b(\s)/)
if (re_split.length > 1) {
re = new RegExp(".*" + re_split[0] + ".*" + ".*" + re_split[2] + ".*", "i");
}
}
tree.clearFilter();
tree.filterBy(function (node) {
if (text.match(/^-{0,1}\d+$/)) {
if (node.data.badgeNumber == text) { return true; }
else
if (node.data.clockNumber == text) { return true; }
else return false;
}
else return re.test(node.data.text);
});
tree.filterBy(function () { return true; });
//tree.collapseAll();
//tree.expandAll();
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:TreePanel
ID="TreePanel1"
runat="server"
Width="300"
Height="450"
Icon="BookOpen"
RootVisible="false"
CollapseFirst="false"
Title="Catalog"
AutoScroll="true">
<Listeners>
<ItemKeyPress Handler="alert(e.getKeyName());" />
</Listeners>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Expand All">
<Listeners>
<Click Handler="#{TreePanel1}.expandAll();" />
</Listeners>
</ext:Button>
<ext:Button ID="Button2" runat="server" Text="Collapse All">
<Listeners>
<Click Handler="#{TreePanel1}.collapseAll();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Root>
<ext:Node Text="Composers" Expanded="true">
<Children>
<ext:Node Text="Beethoven" Icon="UserGray">
<Children>
<ext:Node Text="Concertos">
<Children>
<ext:Node Text="No. 1 - C" Icon="Music" Leaf="true" />
<ext:Node Text="No. 2 - B-Flat Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 3 - C Minor" Icon="Music" Leaf="true" />
<ext:Node Text="No. 4 - G Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 5 - E-Flat Major" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
<ext:Node Text="Quartets">
<Children>
<ext:Node Text="Six String Quartets" Icon="Music" Leaf="true" />
<ext:Node Text="Three String Quartets" Icon="Music" Leaf="true" />
<ext:Node Text="Grosse Fugue for String Quartets" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
<ext:Node Text="Sonatas">
<Children>
<ext:Node Text="Sonata in A Minor" Icon="Music" Leaf="true" />
<ext:Node Text="sonata in F Major" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
<ext:Node Text="Symphonies">
<Children>
<ext:Node Text="No. 1 - C Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 2 - D Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 3 - E-Flat Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 4 - B-Flat Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 5 - C Minor" Icon="Music" Leaf="true" />
<ext:Node Text="No. 6 - F Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 7 - A Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 8 - F Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 9 - D Minor" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
</Children>
</ext:Node>
<ext:Node Text="Brahms" Icon="UserGray">
<Children>
<ext:Node Text="Concertos">
<Children>
<ext:Node Text="Violin Concerto" Icon="Music" Leaf="true" />
<ext:Node Text="Double Concerto - A Minor" Icon="Music" Leaf="true" />
<ext:Node Text="Piano Concerto No. 1 - D Minor" Icon="Music" Leaf="true" />
<ext:Node Text="Piano Concerto No. 2 - B-Flat Major" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
<ext:Node Text="Quartets">
<Children>
<ext:Node Text="Piano Quartet No. 1 - G Minor" Icon="Music" Leaf="true" />
<ext:Node Text="Piano Quartet No. 2 - A Major" Icon="Music" Leaf="true" />
<ext:Node Text="Piano Quartet No. 3 - C Minor" Icon="Music" Leaf="true" />
<ext:Node Text="Piano Quartet No. 3 - B-Flat Minor" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
<ext:Node Text="Sonatas">
<Children>
<ext:Node Text="Two Sonatas for Clarinet - F Minor" Icon="Music" Leaf="true" />
<ext:Node Text="Two Sonatas for Clarinet - E-Flat Major" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
<ext:Node Text="Symphonies">
<Children>
<ext:Node Text="No. 1 - C Minor" Icon="Music" Leaf="true" />
<ext:Node Text="No. 2 - D Minor" Icon="Music" Leaf="true" />
<ext:Node Text="No. 3 - F Major" Icon="Music" Leaf="true" />
<ext:Node Text="No. 4 - E Minor" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
</Children>
</ext:Node>
<ext:Node Text="Mozart" Icon="UserGray">
<Children>
<ext:Node Text="Concertos">
<Children>
<ext:Node Text="Piano Concerto No. 12" Icon="Music" Leaf="true" />
<ext:Node Text="Piano Concerto No. 17" Icon="Music" Leaf="true" />
<ext:Node Text="Clarinet Concerto" Icon="Music" Leaf="true" />
<ext:Node Text="Violin Concerto No. 5" Icon="Music" Leaf="true" />
<ext:Node Text="Violin Concerto No. 4" Icon="Music" Leaf="true" />
</Children>
</ext:Node>
</Children>
</ext:Node>
</Children>
</ext:Node>
</Root>
<BottomBar>
<ext:Toolbar runat="server">
<Items>
<ext:TextField ID="searchField" runat="server" Width="150" />
<ext:Button runat="server" Text="Search" Handler="searchFilter()" />
</Items>
</ext:Toolbar>
</BottomBar>
</ext:TreePanel>
</form>
</body>
</html>
The only way to mitigate the issue is by injecting a "collapse/expand" call after the filtering (as seen commented out at the end of the filtering function.Thank you.