Is There A Way To Only Show Parent Nodes In A Extjs Tree

I want to show only parent nodes of a tree in extjs. In my datastore there are leaf nodes as well. The output should be like - Folder 1 Folder 1.1 Folder 2 Folder 3

Solution 1:

Create a filter object that gets only parent nodes and add it to the store config:

E.g. filter for parent nodes only:

var nodeFilter = new Ext.util.Filter({
    property: 'leaf',
    value   : false
});

Putting it on the treestore config:

var yourTreeStore = Ext.create('Ext.data.TreeStore', {
    // other configs ...
    filters: [nodeFilter]
});

EDIT:

incutonez is right, I submitted according to the API properties but did not notice the missing functions. They are easy enough to override though to apply filtering for a treestore though. This is working for me in 4.1b2:

Ext.override(Ext.data.TreeStore, {

    hasFilter: false,

    filter: function(filters, value) {

        if (Ext.isString(filters)) {
            filters = {
                property: filters,
                value: value
            };
        }

        var me = this,
            decoded = me.decodeFilters(filters),
            i = 0,
            length = decoded.length;

        for (; i < length; i++) {
            me.filters.replace(decoded[i]);
        }

        Ext.Array.each(me.filters.items, function(filter) {
            Ext.Object.each(me.tree.nodeHash, function(key, node) {
                if (filter.filterFn) {
                    if (!filter.filterFn(node)) node.remove();
                } else {
                    if (node.data[filter.property] != filter.value) node.remove();
                }
            });
        });
        me.hasFilter = true;

    },

    clearFilter: function() {
        var me = this;
        me.filters.clear();
        me.hasFilter = false;
        me.load();
    },

    isFiltered: function() {
        returnthis.hasFilter;
    }

});

With this overrride in your code, you could create a "leaf only" filter as a function or a property/value pair as per the Ext.util.Filter API:

// leaf only filter as a property/value pairvar nodeFilter = newExt.util.Filter({
    property: 'leaf',
    value   : false
});

// leaf only filter as a functionvar nodeFilter = Ext.create('Ext.util.Filter', {
  filterFn: function(item) {
    return !item.data.leaf;
  }
});

You could then just call the filter function whenever to take out the leaf nodes:

myTreeStore.filter(nodeFilter);

Solution 2:

TreeStores do not inherit filtering (because they're abstract stores), so Geronimo's answer did not work for me. I wish it did because it would've made my life a whole lot easier.

Anyway, I have a thread over on the Sencha forums that provides a working filtering solution. In my example, filtering is called by the filterBy function, so I'm sure you could tweak it to work your way.