帮助我理解树过滤。
我有输入
xtype: 'triggerfield',
listeners: {
change: function() {
console.log()
}
}
如何过滤树?我需要使用字段
中的值向服务器发送请求答案 0 :(得分:0)
您可以使用 filterBy 方法在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();
}
}]
}]
}]
}]
});
示例小提琴: https://fiddle.sencha.com/#view/editor&fiddle/29si
修改强>
对于远程过滤,您可以执行以下操作:
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();
}
}]
}]
}]
}]
});
远程排序小提琴示例: https://fiddle.sencha.com/#view/editor&fiddle/29sq
看看请求的响应,您可以使用此过滤服务器端。另外为了便于理解,我将params作为响应,显示了如何在http请求中实际显示过滤器,需要进行处理。
注意:确保以下列格式发送数据回复:
{状态:'成功',儿童:[{...},{...},....]}
如果您要以其他格式发送回复,则需要在商店代理中处理回复。