Question

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

我的自定义treeFilter

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..........???????????????????
        }
});

Answer 1

首先，TreeStore没有过滤器操作，您可以在the documentation中看到。

在任何情况下，trigger的正确使用是定义单击每个触发器时要采取的操作。对于每个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的商店中使用setRootNode。清除搜索需要恢复原始根节点。

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

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

如何在extjs 4（mvc）中过滤静态treeStore

1 个答案: