PDA

View Full Version : TreeStore with filters



hlurger
15 Nov 2012, 12:10 AM
Hi!

Since Ext JS 4.1 filter should work for TreeStores.... For me it dosen't work at all!





Ext.define('KM.store.Reservations', {
extend: 'Ext.data.TreeStore',
model: 'KM.model.AksData',
proxy: [ ... ],
filters: [
function(item) {
return item.internalId > 0;
//or return false;
// return item.isChecked;
}
],
filterOnLoad: true




Is it a bug, or am I just missing something??

vietits
15 Nov 2012, 12:43 AM
Ext.data.TreeStore does not implement filtering functions so filters, filterOnLoad which are inherited from Ext.data.AbstractStore have no effect.

hlurger
15 Nov 2012, 2:22 AM
This is not ture anymore!

In the docs of ExtJS 4.1.3 there is config option "filters"!
Look: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.TreeStore

You can pass filters with the config to the TreeStore!! It must be a very new feature, but it is there!
So it is probably a bug?

Anyway, for it dosen't work, but I am still not sure if it is a bug or I am just not getting it to work??

vietits
15 Nov 2012, 4:58 AM
As I wrote in my previous post, filters, filterOnLoad and filter() are from Ext.data.AbstractStore. However, Ext.data.TreeStore does not implement filtering functions so they have no effect. You can check this by reading the source code of Ext.data.TreeStore. What you see in the document are from Ext.data.AbstractStore. (look on the right of these configs and methods and you will see where they are from).

hlurger
15 Nov 2012, 5:58 AM
Ahhhhh.... Okay, I've got it!! Thanks!

It is still a little bit frustrating, that it is not standing in the documentation! Like: "Hi, I am inherited but not implemented!!"
Everytime I want to use an inherited method, I have to look in the source code if it is implemented or not??
Why can't you throw an 'NotImplementedException' or so.... There must be way to mark such method, so that you don't waste half of a day just trying to get it work!

However, back to my problem:
The only way to hide nodes in a TreeStore is to copy it to a temporary TreeStore (to hide them) and to copy it back to show the node! I will try it, and post a solution if I get it working...

hlurger
15 Nov 2012, 9:16 AM
Hi again!

Here is my solution, to hide/show nodes in a TreeGrid! I am using good old CSS (display:none) to hide/show nodes in a TreeGrid...

The question is, how to apply it just to the nodes I want to hide...

With the viewConfig (from the TreePanel) you can style individual rows.


Ext.define('KM.view.reservation.AgendaView', {
extend: 'Ext.tree.Panel',
store: 'MyStore',
id: 'myTreePanel',

etc.

viewConfig: {
getRowClass: function(record, rowIndex, rowParams, store){
if(!record.data.show)
return "myHide";
else
return "";
}
}

Of course you can define here your own rules (e.g. just show leafs: if(!node.data.leaf) return myHide)
In my case I add to the model of the store an extra field "show"...


{name: 'show', type: 'bool', defaultValue: true}

and of course you have to provide the css-class "myHide"...



.myHide {
display: none;
}

If you want to filter (hide) some nodes, you have to set the field show to false (node.data.show = false). After that you must refresh the view, so that the viewConfig is getting applied...



panel = Ext.ComponentMgr.get('myTreePanel')
view = panel.view;
view.refresh();


With this method, you don't need to remove the nodes from the TreePanel, they are realy just hidden!

ubervittel
25 Jan 2013, 7:37 AM
Thanks very much hlurger

I built on top of your idea to make it dynamic based on a textfield, I had a list of users in my tree and wanted to be able to filter on them. Just thought I'd share...



viewConfig: {
getRowClass: function(record, rowIndex, rowParams, store) {
var searchString = Ext.getCmp('user-searchbar').getValue();
return (searchString=='' || record.data.username.indexOf(searchString) != -1) ? "" : "myHide";
}
},
bbar: [{
xtype: 'textfield',
id: 'user-searchbar',
flex: 1,
emptyText: 'Search Users...',
enableKeyEvents: true,
listeners: {
keyup: function(input, e, eOpts) {
Ext.getCmp('usersTree').view.refresh();
}
}
}]