how to filter static treeStore in extjs 4 (mvc)

Question

I have a static tree store and I want to filter my tree. To do this I add a tbar. how could I filter my tree from the textfield of this tbar?

Here is my store with static data

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

in this section i add a tbar with textfield and want to search from this

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

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

score 0 · Answer 1 · edited May 23 '17 at 12:27

For one thing, TreeStores don't have filter actions, as you can see in the documentation.

In any case, the proper use of triggers is to define actions to take when each trigger is clicked. For each triggerXCls, define a corresponding onTriggerXClick that will handle what to do. See a small fiddle 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');
    }

});

The best I can think to do is when the search is initiated, cascade through the root node of the tree and populate a whole new root node object that contains the nodes that match the search text. Then setRootNode on the treePanel's store. Clearing the search would need to reinstate the original root node.

Better yet, I'd cascade through the root node and change the class of items that don't match the search such that they appear greyed out. That would make the nodes that DO match the search "pop".

EDIT: better yet, there are answers around here that have to do with tree filtering. Give those solutions a shot.

how to filter static treeStore in extjs 4 (mvc)

1 Answers1