Show/Hide of the tree node in ExtJS 4

[Qtx]

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?

[mitchellsimoens]

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.

[Qtx]

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

  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.

[jrh0090]

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

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);
    },

[lagnat]

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

[ExtJSNinjas]

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

[roman.savko]

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

 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);
                                    }
                                });
                            }
                        }


                    }
                });

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);
}

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);
    },

[charris]

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.

[mw-flow]

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

[slemmon]

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