View Full Version : How to apply Ext.ux.grid.FiltersFeature to Ext.tree.Panel

30 Nov 2011, 4:27 AM

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

I use two example:

Here is my code:

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


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.

30 Nov 2011, 9:06 AM
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

1 Dec 2011, 3:43 AM
Ok i understand your point of view. But can you please explain that in Ext GWT
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?

1 Dec 2011, 5:17 AM
Ext GWT has it's own set of widgets. It's not Ext JS but still has the same look.

2 Apr 2012, 7:19 AM
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) {
fn: this.getRecordFilter(),
scope: this
} else {


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