Ext JS 4：过滤TreeStore [英] Ext JS 4: Filtering a TreeStore
问题描述
我最初在Sencha论坛上发布了这个这里，但没有得到任何回应（除了我自己的答案，我将尽快发布），所以我要转发到这里，看看我是否得到帮助。 p>
我一直在大脑中如何在4.0.7中过滤TreeStore。我尝试了以下内容：
模型
code> Ext.define（'model'，{
extends：'Ext.data.Model'，
fields：[
{name：'text'，type：'string '}，
{name：'leaf'，type：'bool'}，
{name：'expanded'，type：'bool'}，
{name：'id'键入：'string'}
]，
hasMany：{model：'model'，name：'children'}
}）;
商店
Ext.define（'myStore'，{
extends：'Ext.data.TreeStore'，
model：'model'，
storeId ：'treestore'，
root：{
text：'root'，
children：[{
text：'leaf1'，
id：'leaf1'
children：[{
text：'child1'，
id：'child1'，
leaf：true
}，{
text：'child2 '，
id：'child2'，
leaf：true
}]
}，{
text：'leaf2'，
id：'leaf2 '，
leaf：true
}]
}，
proxy：{
type：'memory'，
reader：{
type ：'json'
}
}
}）;
树
var myTree = Ext.create（'Ext.tree.Panel'，{
id：'myTree'，
selType：'cellmodel'，
selModel：Ext.create（'Ext.selection.CellModel'，{mode：'MULTI'}），
rootVisible：false，
store：Ext.create（'myStore'），
width：300
}）;
过滤器
var filter = Ext.create（'Ext.util.Filter'，{
filterFn：function（item）{
return item.data.text = ='leaf1';
}
}）;
所以我认为我的问题是...我不知道如何使用这个过滤器由于TreeStore实际上不会继承任何类型的过滤器功能，如普通商店。我试过：
myTree.store.filters.add（filter）;
myTree.store.filters.filter（filter）; //这似乎工作
//调试时我可以进入filterFn，但我认为item是我的过滤器对象的this。
通常，如果我有一个网格，并且我创建了一个如上所述的过滤器，我可以做 myTree.store.filter（filter），它会抓住每一行的项目/过滤器返回...但我在想，因为TreeStore不会继承过滤功能，这没有被传入。
如果有人可以提供一些清晰度，说明我在做什么错误或任何洞察如何设置过滤器功能/我的想法过程请继续。感谢任何帮助。
感谢您捕获另一个，我修正了答案，以包括我在下面包含的更加动态的treetore过滤器覆盖来回答你的问题。
它在4.1b2中工作正常，我知道4.07和4.1之间的树木存在一些变化，但是我认为4.07还有我在这里使用的树对象。
以下是覆盖：
Ext.override（Ext.data.TreeStore，{
hasFilter：false ，
过滤器：function（filters，value）{
if（Ext.isString（filters））{
filters = {
属性：filters ，
value：value
};
}
var me = this，
decoded = me.decodeFilters（filters），
i = 0，
length = decoded.length;
$ b $（b） i<长度; i ++）{
me.filters.replace（decode [i]）;
}
Ext.Array.each（me.filters.items，function（filter）{
Ext.Object.each（me.tree.nodeHash，function（key，节点）{
if（filter.filterFn）{
if（！filter.filterFn（node））node.remove（）;
} else {
if（node.data [filter.property]！= filter.value）node.remove（）;
}
}）;
}）;
me.hasFilter = true;
console.log（me）;
}，
clearFilter：function（）{
var me = this;
me.filters.clear（）;
me.hasFilter = false;
me.load（）;
}，
isFiltered：function（）{
return this.hasFilter;
}
}）;
它使用 store.tree.nodeHash 对象遍历过滤器的所有节点，而不仅仅是第一个孩子。它将接受过滤器作为函数或属性/值对。我想，clearFilter方法可以解决，以防止另一个ajax调用。
I originally posted this on the Sencha forums here but didn't get any responses (other than my own answer, which I will post soon), so I am going to repost it here and see if I get anymore help.
I've been racking my brain on how to filter a TreeStore in 4.0.7. I've tried the following:
The model
Ext.define('model', {
extend: 'Ext.data.Model',
fields: [
{name: 'text', type: 'string'},
{name: 'leaf', type: 'bool'},
{name: 'expanded', type: 'bool'},
{name: 'id', type: 'string'}
],
hasMany: {model: 'model', name: 'children'}
});
The store
Ext.define('myStore', {
extend: 'Ext.data.TreeStore',
model: 'model',
storeId: 'treestore',
root: {
text: 'root',
children: [{
text: 'leaf1',
id: 'leaf1',
children: [{
text: 'child1',
id: 'child1',
leaf: true
},{
text: 'child2',
id: 'child2',
leaf: true
}]
},{
text: 'leaf2',
id: 'leaf2',
leaf: true
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json'
}
}
});
The tree
var myTree = Ext.create('Ext.tree.Panel', {
id: 'myTree',
selType: 'cellmodel',
selModel: Ext.create('Ext.selection.CellModel', {mode: 'MULTI'}),
rootVisible: false,
store: Ext.create('myStore'),
width: 300
});
The filter
var filter = Ext.create('Ext.util.Filter', {
filterFn: function(item) {
return item.data.text == 'leaf1';
}
});
So I think my problem is... I don't know how to use this filter due to TreeStore not actually inheriting any type of filter functions like a normal store. I've tried:
myTree.store.filters.add(filter);
myTree.store.filters.filter(filter); // This seems to work
// I can get into the filterFn when debugging, but I think item is the "this" of my filter object.
Normally, if I have a grid and I create a filter like above, I can just do myTree.store.filter(filter) and it'll grab each row's item/filter on what I return... but I'm thinking because TreeStore doesn't inherit a filtering function, that's not being passed in.
If someone could provide some clarity as to what I'm doing wrong or any insight on how to set up a filter function/my thinking process, please go ahead. I'd appreciate any help.
Thanks for catching that other one, I fixed up the answer to include the more dynamic treestore filter override that I included below to answer your Q.
It is working fine in 4.1b2, I know there were some changes to the treestore between 4.07 and 4.1 but I think 4.07 still had the tree objects I am using here.
Here's the override:
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;
console.log(me);
},
clearFilter: function() {
var me = this;
me.filters.clear();
me.hasFilter = false;
me.load();
},
isFiltered: function() {
return this.hasFilter;
}
});
It uses the store.tree.nodeHash object to iterate through all nodes against the filters rather than just the first child. It will accept a filter as a function or property/value pair. I suppose the clearFilter method could be worked over though to prevent another ajax call.
这篇关于Ext JS 4：过滤TreeStore的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
