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

Posted 2023-02-26

【中文标题】如何在 extjs 4 (mvc) 中过滤静态 treeStore

【英文标题】：how to filter static treeStore in extjs 4 (mvc)

【发布时间】：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..........???????????????????
        
);

【参考方案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 与树过滤有关。试一试这些解决方案。