1. #1
    Sencha User
    Join Date
    Jun 2008
    Posts
    288
    Vote Rating
    16
    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
    35,703
    Vote Rating
    749
    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
    288
    Vote Rating
    16
    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
    84
    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 roman.savko's Avatar
    Join Date
    Mar 2011
    Location
    Kiev
    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
    12
    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
    4,770
    Vote Rating
    165
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar