extjs - Ext JS 4: Filtering a TreeStore -
i posted on sencha forums here didn't responses (other own answer, post soon), going repost here , see if anymore help.
i've been racking brain on how filter treestore in 4.0.7. i've tried 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 think problem is... don't know how use filter due treestore not inheriting type of filter functions normal store. i've tried:
mytree.store.filters.add(filter); mytree.store.filters.filter(filter); // seems work // can filterfn when debugging, think item "this" of filter object.
normally, if have grid , create filter above, can mytree.store.filter(filter)
, it'll grab each row's item/filter on return... i'm thinking because treestore doesn't inherit filtering function, that's not being passed in.
if provide clarity i'm doing wrong or insight on how set filter function/my thinking process, please go ahead. i'd appreciate help.
thanks catching other one, fixed answer include more dynamic treestore filter override included below answer q.
it working fine in 4.1b2, know there changes treestore between 4.07 , 4.1 think 4.07 still had tree objects using here.
here's 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), = 0, length = decoded.length; (; < 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 store.tree.nodehash
object iterate through nodes against filters rather first child. accept filter function or property/value pair. suppose clearfilter method worked on though prevent ajax call.
Comments
Post a Comment