【发布时间】:2012-03-08 10:42:13
【问题描述】:
我想在 extjs 中只显示树的父节点。在我的数据存储中也有叶节点。
输出应该像 -
文件夹 1 文件夹 1.1 文件夹 2 文件夹 3【问题讨论】:
标签: javascript html tree treeview extjs4
我想在 extjs 中只显示树的父节点。在我的数据存储中也有叶节点。
输出应该像 -
文件夹 1 文件夹 1.1 文件夹 2 文件夹 3【问题讨论】:
标签: javascript html tree treeview extjs4
创建一个只获取父节点的过滤器对象并将其添加到存储配置中:
例如仅过滤父节点:
var nodeFilter = new Ext.util.Filter({
property: 'leaf',
value : false
});
将它放在树存储配置中:
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);
【讨论】:
TreeStores 不继承过滤(因为它们是抽象存储),所以 Geronimo 的回答对我不起作用。我希望这样做,因为它会让我的生活变得更轻松。
无论如何,我在 Sencha 论坛上有一个thread,它提供了一个工作过滤解决方案。在我的示例中,过滤由 filterBy 函数调用,所以我相信您可以调整它以按照自己的方式工作。
【讨论】: