Extjs4.1 如何在ExtJS4（mvc）中过滤静态树存储

我有一个静态树存储，我想过滤我的树。为此，我添加了一个tbar。如何从该tbar的文本字段中筛选我的树

这是我的静态数据存储

Ext.define('TestApplication.store.TreeStoree', {
    extend: 'Ext.data.TreeStore',
    root: {
        expanded: false, 
        children: [{
            text: "Project",
            expanded: false,
            children:[
                { id: '1', text: "Transaction", leaf: true },
                { id: '2', text: "Query", leaf: true },
                { id: '3', text: "Report", leaf: true },
                { id: '4', text: "Initialization", leaf: true },
                { id: '5', text: "Sequence", leaf: true },
                { id: '6', text: "Batch", leaf: true }
            ]
        }, {
            text: "Records Display",
            expanded: false, 
            children: [
                { id: '7', text: "Previous", leaf: true },
                { id: '8', text: "Running", leaf: true }
            ]
        }, {
            text: "Photo",
            expanded: false, 
            children: [
                { id: '9', text: "Specimen", leaf: true }
            ]
        }, {
            text: "Signature",
            expanded: false, 
            children: [
                { id: '10', text: "Carbon Copy", leaf: true }
            ]
        }, {
            text: "D N A",
            expanded: false, 
            children: [
                { id: '11', text: "Plastrain", leaf: true },
                { id: '12', text: "Generic", leaf: true }
            ]
        }]
    }
});

在本节中，我添加了一个带有textfield的tbar，并希望从中进行搜索

Ext.define('TestApplication.view.display.TreeView' ,{
    extend: 'Ext.tree.Panel',
    alias : 'widget.treeView',
    rootVisible: false,
    useArrows: true,
    border:true,
    initComponent: function() {
        var me = this;
        me.tbar = [
        {
            xtype: 'treefilter', 
            emptyText: 'Search', 
            store: 'TreeStoree', 
            flex: 1 
        }
        ];
        me.callParent(arguments);
    }
});

我的自定义树过滤器

Ext.define('TestApplication.view.display.CustomFilter', {
    extend: 'Ext.form.field.Trigger',
    alias: 'widget.customfilter',
    trigger1Cls: Ext.baseCSSPrefix + 'form-clear-trigger',
    trigger2Cls: Ext.baseCSSPrefix + 'form-search-trigger',

    initComponent: function() {
        var me = this;    
        me.callParent(arguments);
        me.on('change', function(){
            me.onFilterStore();
        });      

    },
    onFilterStore : function(){
                // what will be my codes here..........???????????????????
        }
});

---

首先，正如您在中所看到的，树存储没有过滤操作

在任何情况下，s的正确用法是定义单击每个触发器时要采取的操作。对于每个

triggerXCls

，定义一个相应的

onTriggerXClick

，它将处理要执行的操作。看到一把小小提琴

我认为最好的方法是在启动搜索时，通过树的根节点级联并填充一个全新的根节点对象，其中包含与搜索文本匹配的节点。然后在树面板的存储上设置RootNode。清除搜索需要恢复原始根节点

更好的是，我通过根节点进行级联，并更改与搜索不匹配的项目类别，使其显示为灰色。这将使与搜索匹配的节点成为“pop”

编辑：更妙的是，这里有一些与树过滤相关的功能。试一试这些解决方案

Ext.define('TestApplication.view.display.CustomFilter', {
    extend: 'Ext.form.field.Trigger',
    alias: 'widget.customfilter',
    trigger1Cls: Ext.baseCSSPrefix + 'form-clear-trigger',
    trigger2Cls: Ext.baseCSSPrefix + 'form-search-trigger',

    initComponent: function() {
        var me = this;
        me.callParent(arguments);
        me.on({
            change: me.onFilterStore,
            scope: me,
         });

    },
    onTriggerClick: function() {
        var me = this;
        console.log('You clicked my clear trigger!');
        me.setValue('');
    },
    onTrigger2Click: function() {
         var me = this;
         console.log('You clicked my search trigger!');
    },
    onFilterStore: function(){
        console.log('change is-a happening');
    }

});