How to apply Ext.ux.grid.FiltersFeature to Ext.tree.Panel

[Romick]

Hi!

Can you tell me please in what direction i should move to made filtering in my treeGrid.

I use two example:
http://docs.sencha.com/ext-js/4-0/#!/example/tree/treegrid.html
http://docs.sencha.com/ext-js/4-0/#!/example/grid-filtering/grid-filter-local.html

Here is my code:

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux');

Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.tree.*'
,'Ext.ux.grid.FiltersFeature'
]);

Ext.onReady(function() {

var filters = {
ftype: 'filters',
encode: false,
local: true,
filters: [{
type: 'string',
dataIndex: 'task'
}]
};

//we want to setup a model and store instead of using dataUrl
Ext.define('Task', {
extend: 'Ext.data.Model',
fields: [
{name: 'task', type: 'string'},
{name: 'user', type: 'string'},
{name: 'duration', type: 'string'}
]
});

var store = Ext.create('Ext.data.TreeStore', {
model: 'Task',
proxy: {
type: 'ajax',
//the store will get the content from the .json file
url: 'treegrid.json'
},
folderSort: true
});

//Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
var tree = Ext.create('Ext.tree.Panel', {
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: Ext.getBody(),
collapsible: true,
useArrows: true,
rootVisible: false,
store: store,
multiSelect: true,
singleExpand: true,
features: [filters],
//the 'columns' property is now 'headers'
columns: [{
xtype: 'treecolumn', //this is so we know which column will show the tree
text: 'Task',
flex: 2,
sortable: true,
dataIndex: 'task'
},{
//we must use the templateheader component so we can use a custom tpl
xtype: 'templatecolumn',
text: 'Duration',
flex: 1,
sortable: true,
dataIndex: 'duration',
align: 'center',
filterable: true,
//add in the custom tpl for the rows
tpl: Ext.create('Ext.XTemplate', '{duration:this.formatHours}', {
formatHours: function(v) {
if (v < 1) {
return Math.round(v * 60) + ' mins';
} else if (Math.floor(v) !== v) {
var min = v - Math.floor(v);
return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
} else {
return v + ' hour' + (v === 1 ? '' : 's');
}
}
})
},{
text: 'Assigned To',
flex: 1,
dataIndex: 'user',
filter: {
type: 'string'
},
sortable: true
}]
});
});

There way an exeption grid is not defined so i change method

getGridPanel: function() {
//return this.view.up('gridpanel');
return this.view.up('treepanel');
}
and it seems that treeFiltering doent work at all and no exeption there.
Did anyone did it before? Give me please some suggestion or links to go thy the flow.
Thanks in advise. Sorry for my English hope you can understand.

[mitchellsimoens]

Based on the name, it was built for grids not trees so there may be other things in there that prevent it. That and TreeStore isn't the best at filtering/sorting

[Romick]

Ok i understand your point of view. But can you please explain that in Ext GWT
http://sencha.com/examples/#filtertreegrid
is that component treeGrid and there are filter? but in ext JS isn't. I thought it use the same library under the hood. Didn't they?

[mitchellsimoens]

Ext GWT has it's own set of widgets. It's not Ext JS but still has the same look.

[fbrus001]

Ext.define('MyApp.feature.TreeFiltersFeature', {
extend: 'Ext.ux.grid.FiltersFeature',
alias: 'feature.treefilters',

//overridden method
getGridPanel: function () {
return this.getTreePanel();
},

getTreePanel: function () {
return this.view.up('treepanel');
},

//overridden method
reload: function () {
var treeStore = this.view.getTreeStore();
if (this.local) {
treeStore.clearFilter(true);
treeStore.filter([
{
fn: this.getRecordFilter(),
scope: this
}
]);
} else {
this.deferredUpdate.cancel();
treeStore.loadPage(1);
}
}

});


Then, you can add your own filter logic to the Ext JS TreeStore.