有没有办法只显示extjs树中的父节点

时间:2012-03-08 10:42:13

标签: javascript html tree treeview extjs4

我想在extjs中只显示树的父节点。在我的数据存储区中也有叶节点。

输出应该像 -

Folder 1
   Folder 1.1
Folder 2
Folder 3

2 个答案:

答案 0 :(得分:3)

创建一个仅获取父节点的过滤器对象,并将其添加到商店配置中:

E.g。仅筛选父节点:

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

将它放在treestore config上:

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

修改

incutonez是对的,我根据API属性提交但没有注意到缺少的功能。尽管如此,它们很容易覆盖以对树库应用过滤。这在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() {
        return this.hasFilter;
    }

});

在代码中使用此覆盖,您可以根据Ext.util.Filter API创建一个“仅叶子”过滤器作为函数或属性/值对:

// leaf only filter as a property/value pair
var nodeFilter = new Ext.util.Filter({
    property: 'leaf',
    value   : false
});

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

然后,您可以随时调用过滤器函数来取出叶节点:

myTreeStore.filter(nodeFilter);

答案 1 :(得分:0)

TreeStores不继承过滤(因为它们是抽象存储),因此Geronimo的答案对我不起作用。我希望它能成功,因为它会让我的生活变得更加轻松。

无论如何,我在Sencha论坛上有一个thread,它提供了一个工作过滤解决方案。在我的例子中,过滤由filterBy函数调用,所以我相信你可以调整它以按照自己的方式工作。