Ext js 6 filtering Tree Panel - extjs

Question

help me understand the tree filtering.
I have input ow
xtype: 'triggerfield',
listeners: {
change: function() {
console.log()
}
}
How can I filter the tree? I need to send a request to the server with a value from the field

Answer 1

You can use filterBy method to do simple or complex filtering on TreeStore:
var store = Ext.create('Ext.data.TreeStore', {
autoload: true,
root: {
expanded: true,
specialProp: 1,
children: [{
text: "detention",
leaf: true,
specialProp: 1
}, {
text: "homework",
expanded: true,
children: [{
text: "book report",
leaf: true,
specialProp: 1
}, {
text: "algebra",
leaf: true,
specialProp: 2
}]
}, {
text: "buy lottery tickets",
leaf: true,
specialProp: 1
}]
}
});
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'container',
items: [{
xtype: 'treepanel',
id: 'treePanelId',
store: store,
dockedItems: [{
xtype: 'toolbar',
items: [{
xtype: 'button',
text: 'specialProp=1 Filter',
handler: function () {
var treePanel = Ext.getCmp('treePanelId');
treePanel.getStore().filterBy(function (item) {
if (item.get('root') === true) return true;
else if (item.get('specialProp') === 1) return true;
else return false;
});
}
}, {
xtype: 'button',
text: 'Clear filter',
handler: function () {
var treePanel = Ext.getCmp('treePanelId');
treePanel.getStore().clearFilter();
}
}]
}]
}]
}]
});
Example Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/29si
EDIT:
For remote filtering you can do it like following:
var store = Ext.create('Ext.data.TreeStore', {
remoteFilter: true,
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json'
}
},
root: {
expanded: true
}
});
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'container',
items: [{
xtype: 'treepanel',
id: 'treePanelId',
store: store,
dockedItems: [{
xtype: 'toolbar',
items: [{
xtype: 'button',
text: 'specialProp=1 Filter',
handler: function () {
var treePanel = Ext.getCmp('treePanelId');
treePanel.getStore().filter('specialProp', 1);
}
}, {
xtype: 'button',
text: 'Clear filter',
handler: function () {
var treePanel = Ext.getCmp('treePanelId');
treePanel.getStore().clearFilter();
}
}]
}]
}]
}]
});
Remote Sort Fiddle Example: https://fiddle.sencha.com/#view/editor&fiddle/29sq
Take a look at response of request, you can filter on server side with this. Also for ease of understanding I have put params in response to show how filters would be actually appear on http request which need to be processed.
Note: Make sure you send data response in following format:
{ status: 'success', children: [{...}, {...}, ....] }
If you are sending response in other format you will need to process it in store proxy.