1. #1
    Sencha User
    Join Date
    Jun 2008
    Posts
    314
    Vote Rating
    18
    Qtx will become famous soon enough Qtx will become famous soon enough

      1  

    Default Show/Hide of the tree node in ExtJS 4

    Show/Hide of the tree node in ExtJS 4


    In ExtJS 3, it was possible to show or hide single tree nodes. It was also possible to set on the server side hidden: true and the node was hidden.

    In ExtJS 4, the tree is also a table and it seems that there is no possibility any more to show and hide single nodes.

    Am I correct in my assumption or there is possibilities to do this?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    Unfortunately there is no way to hide a node. You could remove a node (cache it's position) and then add a node back in.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jun 2008
    Posts
    314
    Vote Rating
    18
    Qtx will become famous soon enough Qtx will become famous soon enough

      1  

    Default


    Thank you for the information. My assumption was correct.

    I would like to offer some improvements to the TreeStore and loading issues. Already in the ExtJS 3, I noticed that the TreeLoader expects the json structure of pure node array only. No additional information like success indicator or a warning message or an error message could be sent as response.

    In ExtJS 3, I solved this problem by putting this information in the first reserved node and made it invisible.

    Since in the ExtJS 4, the tree is a table and the tree store is a store, it would make sense to make the expected json structure for the tree store like it is for the normal store - not just pure array of nodes but

    - the base response object where the success indicator, error messages etc could be put
    - the 'root' property where the record collection is found

    Code:
      store = Ext.create('Ext.data.TreeStore', {
        proxy: {
          type: 'ajax',
          url: 'ajax/node_tree.php',
          
          reader: {
            type: 'json'
            root: 'tree_nodes'
          },
        }
    The 'root' property could be then specified like by normal Stores in the reader. I will override the TreeStore and related classes for my solution, but I think it make sense to make this general and universal approach which is used for the normal Stores also for the TreeStore.

  4. #4
    Sencha Premium Member
    Join Date
    Aug 2010
    Posts
    3
    Vote Rating
    0
    jrh0090 is on a distinguished road

      0  

    Default


    This is a bit janky and probably unsupported but this is the current workaround I have for hiding a single node.

    Code:
    setNodeVisible: function(nodeId, visible) {
            var node = this.getNodeById(nodeId),
                view = this.getView(),
                el = Ext.fly(view.getNodeByRecord(node));
    
    
            el.setVisibilityMode(Ext.Element.DISPLAY);
            el.setVisible(visible);
        },

  5. #5
    Ext JS Premium Member
    Join Date
    Oct 2007
    Posts
    98
    Vote Rating
    4
    lagnat is on a distinguished road

      0  

    Default


    Mitchell, is this capability on the road map? ExtJS 4.1 maybe?

  6. #6
    Ext JS Premium Member
    Join Date
    Sep 2011
    Posts
    62
    Vote Rating
    0
    ExtJSNinjas is on a distinguished road

      0  

    Default


    I would also like to know if this will be supported in the future. Using the work-around is slow in IE.

  7. #7
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    26
    Vote Rating
    2
    roman.savko is on a distinguished road

      2  

    Default


    Thanks a lot for your workaround. I wanna suggest more reliable code which works fine for me:

    Code:
     var tree = Ext.create('Ext.tree.Panel', {
                        useArrows : true,
                        rootVisible : showTreeRoot,
                        autoScroll : true,
                        store : store
                    });
    
    var filteredNodes = [];
    toolbar.add({
                        xtype : 'textfield',
                        emptyText : 'Type to search...',
                        enableKeyEvents : true,
                        listeners : {
                            focus : {
                                fn : function(view, record, item, index, even) {
                                    this.setValue("");
                                    Ext.each(filteredNodes, function(n) {
                                        var el = Ext.fly(tree.getView().getNodeByRecord(n));
                                        if (el != null) {
                                         el.setDisplayed(true);
                                        }
                                    });
                                }
                            },
                            keyup : {
                                fn : function() {
                                    var re = new RegExp(Ext.escapeRe(this.getValue()), 'i');
                                    var visibleSum = 0;
    
    
                                    var filter = function(node) {// descends into child nodes
                                        if(node.hasChildNodes()) {
                                            visibleSum = 0
                                            node.eachChild(function(childNode) {
                                                if(childNode.isLeaf()) {
                                                    if(!re.test(childNode.data.text)) {
                                                        filteredNodes.push(childNode);
                                                    } else {
                                                        visibleSum++;
                                                    }
                                                } else if(!childNode.hasChildNodes() && re.test(childNode.data.text)) {// empty folder, but name matches
                                                    visibleSum++;
                                                } else {
                                                    filter(childNode);
                                                }
                                            });
                                            if(visibleSum == 0 && !re.test(node.data.text)) {
                                                filteredNodes.push(node);
                                            }
                                        } else if(!re.test(node.data.text)) {
                                            filteredNodes.push(node);
                                        }
                                    }
                                    tree.getRootNode().cascadeBy(filter);
                                    Ext.each(filteredNodes, function(n) {
                                        var el = Ext.fly(tree.getView().getNodeByRecord(n));
                                        if (el != null) {
                                            el.setDisplayed(false);
                                        }
                                    });
                                }
                            }
    
    
                        }
                    });
    Quote Originally Posted by jrh0090 View Post
    This is a bit janky and probably unsupported but this is the current workaround I have for hiding a single node.

    var el = Ext.fly(tree.getView().getNodeByRecord(n));
    if (el != null) {
    el.setDisplayed(false);
    }

    Code:
    setNodeVisible: function(nodeId, visible) {
            var node = this.getNodeById(nodeId),
                view = this.getView(),
                el = Ext.fly(view.getNodeByRecord(node));
    
    
            el.setVisibilityMode(Ext.Element.DISPLAY);
            el.setVisible(visible);
        },

  8. #8
    Sencha User charris's Avatar
    Join Date
    Sep 2010
    Location
    Brooklyn, NY
    Posts
    106
    Vote Rating
    13
    charris will become famous soon enough

      0  

    Default


    I've been told by one of the Sencha developers that there's a ticket in Jira (EXTJSIV-28) for adding filtering to tree, scheduled for 4.1.

  9. #9
    Sencha Premium Member mw-flow's Avatar
    Join Date
    Dec 2007
    Location
    Munich, Germany
    Posts
    113
    Vote Rating
    1
    mw-flow is on a distinguished road

      0  

    Question 4.1 tree filtering implemented?

    4.1 tree filtering implemented?


    Quote Originally Posted by charris View Post
    I've been told by one of the Sencha developers that there's a ticket in Jira (EXTJSIV-28) for adding filtering to tree, scheduled for 4.1.
    Hi folks,

    has anyone already seen if this has been implemented now that 4.1 is final?

    Thanks a bundle
    Markus
    Markus Wichmann
    --
    Join our ExtJS and Sencha Touch Meetup in Munich
    @SenchaMUC


  10. #10
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,062
    Vote Rating
    215
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    I'm not seeing it in 4.1.
    Here's what I ended up doing. Tested in 4.1 RC3. Haven't tested in the final release.
    http://www.sencha.com/forum/showthre...ht=tree+filter