Results 1 to 7 of 7

Thread: Can't Collapse/Expand Tree Panel after Filtering Store

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1

    Default Can't Collapse/Expand Tree Panel after Filtering Store

    In the below example, in the top text field, type in 'child1'. This will set all the other children except child1 to be not visible and also expand the parent node. But when you collapse the Root node again, the '-' symbol on the left of the node does not become a '+'. And when you try to expand the Root node again, you cannot.

    What I'm trying to achieve is being able to type in a node name, have it and its parents be visible (if the node is nested multiple times, all ancestors should be visible) and hide all the other nodes, And all its parents need to expand when searching so that the child node appears even if everything was collapsed prior to filtering.

    Any way around this?


  2. #2
    Sencha - Sustaining Engineer tristan.lee's Avatar
    Join Date
    Mar 2015
    Location
    Central Ohio
    Posts
    1,579

    Default

    I'm not sure I understand exactly what you're trying to accomplish with the visibility, but check out this example which filters based on the textfield value:

    Tristan Lee
    Sencha Inc - Sustaining Engineer


    Having an issue? Help us help you - be detailed; provide some code; demonstrate with a fiddle (fiddle.sencha.com)

    Embed your fiddle in your post: [FIDDLE]id[/FIDDLE]

  3. #3

    Default

    The example you posted doesn't handle multiple levels. If I add another child node to 'child1' called 'child4' and attempt to search for 'child4', the entire tree will disappear. And if I try to filter more than once (look for child1, then look for child2), the tree will disappear too.


  4. #4
    Sencha Premium User
    Join Date
    Nov 2013
    Location
    Piacenza, Italy
    Posts
    220

    Default

    In the second example (by tristan.lee) is visible another bug: after filtering, the tree is automatically expanded, but a "+" is shown instead of a "-" and you have to click twice to collapse the tree.

    @querty.503:
    Have you tried the TreeStore option "filterer: 'bottomup'"? May be it can help you in some way...

  5. #5

    Default

    Quote Originally Posted by agarberi View Post
    In the second example (by tristan.lee) is visible another bug: after filtering, the tree is automatically expanded, but a "+" is shown instead of a "-" and you have to click twice to collapse the tree.

    @querty.503:
    Have you tried the TreeStore option "filterer: 'bottomup'"? May be it can help you in some way...
    I couldn't find anything about a 'filterer' option on the TreeStore in the Ext documentation. Can you post a link to it?

  6. #6
    Sencha Premium User
    Join Date
    Nov 2013
    Location
    Piacenza, Italy
    Posts
    220

    Default

    Sure, here is the link:
    http://docs.sencha.com/extjs/6.0/6.0...e-cfg-filterer

    Anyway it's strange you didn't find it: if you type "filterer" in the top-right search field, it is the only option you get.
    Probably you are using the 6.0.0 documentation: the option has been added in 6.0.1.
    http://docs.sencha.com/extjs/6.0/6.0.1-classic/

    The filtering behavior is described also in the last lines of the class description of Ext.data.TreeStore.

  7. #7
    Sencha User
    Join Date
    Dec 2016
    Location
    india
    Posts
    2

    Default

    Ext.application({
    name : 'Fiddle',


    launch : function() {
    var treeStore = Ext.create('Ext.data.TreeStore', {
    autoLoad: false,
    fields: ['node_id', 'name'],
    root: {
    node_id: 'Root',
    name: 'Root',
    expanded: false,
    children: [{
    node_id: 1,
    name: 'child1',
    expanded: false,
    children: [
    {
    node_id: 4,
    name: 'child4',
    leaf: true
    }
    ]
    },
    {
    node_id: 2,
    name: 'child2',
    leaf: true
    },
    {
    node_id: 3,
    name: 'child3',
    leaf: true
    }]
    }
    });

    var treePanel = Ext.create('Ext.tree.Panel', {
    renderTo: Ext.getBody(),
    store: treeStore,
    tbar: [{
    xtype: 'textfield',
    enableKeyEvents: true,
    listeners: {
    specialkey: function(field, e) {
    if(e.getKey() === e.ENTER) {
    treeStore.clearFilter( true );
    var fieldValue = field.getValue();
    treeStore.filterBy(function (record) {
    return record.get('name') === fieldValue;
    });
    }
    }
    }
    }],
    columns: [{
    xtype: 'treecolumn',
    width: 200,
    dataIndex: 'name'
    }]
    });
    }
    });

Similar Threads

  1. Tree panel collapse all & expand all - problem
    By renganathan in forum Ext: Q&A
    Replies: 6
    Last Post: 2 Jun 2017, 3:42 AM
  2. [NOREPRO] Expand and Collapse of tree nodes doesnt work when filtering is enabled.
    By Ksenia Berger in forum Sencha GXT Bugs
    Replies: 3
    Last Post: 1 Jul 2014, 6:08 AM
  3. Tree Panel disappears on Expand/Collapse
    By Mounish S in forum Ext: Q&A
    Replies: 3
    Last Post: 16 Apr 2014, 4:31 AM
  4. [CLOSED] Collapse/expand bug in Ext.tree.Panel
    By m1el in forum Ext:Bugs
    Replies: 4
    Last Post: 23 Jul 2013, 7:23 AM
  5. Replies: 1
    Last Post: 8 May 2013, 2:18 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •