如何在 extjs 4 (mvc) 中过滤静态 treeStore答案

【问题标题】：how to filter static treeStore in extjs 4 (mvc)如何在 extjs 4 (mvc) 中过滤静态 treeStore
【发布时间】：2012-12-20 05:31:37
【问题描述】：

我有一个静态树存储，我想过滤我的树。为此，我添加了一个 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 }
            ]
        }]
    }
});

在本节中，我添加了一个带有文本字段的 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..........???????????????????
        }
});

【问题讨论】：

标签： extjs4.1

【解决方案1】：

一方面，TreeStore 没有过滤器操作，您可以在 the documentation 中看到。

在任何情况下，triggers 的正确用法是定义单击每个触发器时要执行的操作。对于每个triggerXCls，定义一个对应的onTriggerXClick 来处理要做什么。看小小提琴here。

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');
    }

});

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

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

编辑：更好的是，这里有 answers 与树过滤有关。试一试这些解决方案。

【讨论】：