Ext js 6过滤树面板

Question

帮助我理解树过滤。

我有输入

xtype: 'triggerfield',
    listeners: {
        change: function() {
        console.log()
    }
}

如何过滤树？我需要使用字段

中的值向服务器发送请求

Answer 1

您可以使用 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请求中实际显示过滤器，需要进行处理。

注意：确保以下列格式发送数据回复：

  

{状态：＆＃39;成功＆＃39;，儿童：[{...}，{...}，....]}

如果您要以其他格式发送回复，则需要在商店代理中处理回复。