ExtJs – Tree Filter (Live Search) Example

Filter tree panel akan sangat dibutuhkan sebagai fasilitas search, apalagi bila tree tersebut terlalu banyak nested data yang membuat lama untuk mencari sebuah data.

Jika anda sedikit mau berusaha, sebenarnya ada banyak orang baik di Internet yang telah membagikan caranya mengerjakan hal ini dan berikut adalah salah satu yang saya temukan.
JSFiddle : http://jsfiddle.net/slemmon/fSJwF/2/
Mungkin anda mesti menyesuaikan sesuai dengan kebutuhan anda sendiri.

Dan saya membagikan cara yang saya dan rekan saya kerjakan, yang telah disesuaikan dengan kebutuhan aplikasi.

Berikut silahkan disimak :

Sebelumnya anda mungkin bisa lihat demo disini : https://fiddle.sencha.com/fiddle/mch/preview

Untuk source code bisa dilihat disini : https://fiddle.sencha.com/fiddle/mch
atau bila link tidak berhasil sebagai berikut :

Ext.application({
    name: 'Fiddle',

    launch: function() {

        Ext.Msg.alert('Fiddle', 'Welcome to Sencha Fiddle!');

        var store = Ext.create('Ext.data.TreeStore', {
            root: {
                expanded: true,
                children: [{
                    text: "detention",
                    leaf: true
                }, {
                    text: "homework",
                    expanded: true,
                    children: [{
                        text: "book report",
                        leaf: true
                    }, {
                        text: "algebra",
                        leaf: true
                    }]
                }, {
                    text: "chores",
                    expanded: true,
                    children: [{
                        text: "do homework",
                        leaf: true
                    }, {
                        text: "walk dog",
                        leaf: true
                    }, {
                        text: "clean room",
                        leaf: true
                    }, {
                        text: "wash dishes",
                        leaf: true
                    }, {
                        text: "laundry",
                        leaf: true
                    }]
                }, {
                    text: "buy lottery tickets",
                    leaf: true
                }, {
                    text: "take over world",
                    leaf: true
                }, {
                    text: "Sencha",
                    expanded: true,
                    children: [{
                        text: "Touch",
                        expanded: false,
                        children: [{
                            text: 'Viewport',
                            leaf: true
                        }, {
                            text: 'Panel',
                            leaf: true
                        }, {
                            text: 'Carousel',
                            leaf: true
                        }]
                    }, {
                        text: "ExtJS",
                        expanded: true,
                        children: [{
                            text: 'viewport.Viewport',
                            leaf: true
                        }, {
                            text: 'panel.Panel',
                            leaf: true
                        }, {
                            text: 'tree.Panel',
                            leaf: true
                        }]
                    }]
                }]
            }
        });

        var treepanel = Ext.define('Fiddle.treeSample', {
            extend: 'Ext.tree.Panel',
            title: 'Filter Tree Panel By Irfan Maulana',
            store: store,
            width: 300,
            height: 550,
            rootVisible: false,
            hideHeaders: true,
            useArrows: true,
            renderTo: Ext.getBody(),

            initComponent: function() {
                var me = this,
                    lastFilterValue = "";

                me.columns = [{
                    xtype: 'treecolumn',
                    flex: 1,
                    dataIndex: 'text',
                    scope: me,
                    renderer: function(value) {
                        var searchString = this.searchField.getValue();

                        if (searchString.length > 0) {
                            return this.strMarkRedPlus(searchString, value);
                        }

                        return value;
                    }
                }];

                Ext.apply(me, {
                    store: store,
                    dockedItems: [{
                        xtype: 'textfield',
                        dock: 'top',
                        emptyText: 'Search',
                        enableKeyEvents: true,

                        triggers: {
                            clear: {
                                cls: 'x-form-clear-trigger',
                                handler: 'onClearTriggerClick',
                                hidden: true,
                                scope: 'this'
                            },
                            search: {
                                cls: 'x-form-search-trigger',
                                weight: 1,
                                handler: 'onSearchTriggerClick',
                                scope: 'this'
                            }
                        },

                        onClearTriggerClick: function() {
                            this.setValue();
                            me.store.clearFilter();
                            this.getTrigger('clear').hide();
                        },

                        onSearchTriggerClick: function() {
                            me.filterStore(this.getValue());
                        },

                        listeners: {
                            keyup: {
                                fn: function(field, event, eOpts) {
                                    var value = field.getValue();

                                    // Only filter if they actually changed the field value.
                                    // Otherwise the view refreshes and scrolls to top.
                                    if (value == '') {
                                        field.getTrigger('clear').hide();
                                        me.filterStore(value);
                                        lastFilterValue = value;
                                    } else if (value && value !== lastFilterValue) {
                                        field.getTrigger('clear')[(value.length > 0) ? 'show' : 'hide']();
                                        me.filterStore(value);
                                        lastFilterValue = value;
                                    }
                                },
                                buffer: 300
                            },

                            render: function(field) {
                                this.searchField = field;
                            },

                            scope: me
                        }
                    }]
                });

                me.callParent(arguments);

            },

            filterStore: function(value) {
                var me = this,
                    store = me.store,
                    searchString = value.toLowerCase(),
                    filterFn = function(node) {
                        var children = node.childNodes,
                            len = children && children.length,
                            visible = v.test(node.get('text')),
                            i;

                        // If the current node does NOT match the search condition
                        // specified by the user...
                        if (!visible) {

                            // Check to see if any of the child nodes of this node
                            // match the search condition.  If they do then we will
                            // mark the current node as visible as well.
                            for (i = 0; i < len; i++) {
                                if (children[i].isLeaf()) {
                                    visible = children[i].get('visible');
                                } else {
                                    visible = filterFn(children[i]);
                                }
                                if (visible) {
                                    break;
                                }
                            }

                        } else { // Current node matches the search condition...

                            // Force all of its child nodes to be visible as well so
                            // that the user is able to select an example to display.
                            for (i = 0; i < len; i++) {
                                children[i].set('visible', true);
                            }

                        }

                        return visible;
                    },
                    v;

                if (searchString.length < 1) {
                    store.clearFilter();
                } else {
                    v = new RegExp(searchString, 'i');
                    store.getFilters().replaceAll({
                        filterFn: filterFn
                    });
                }
            },

            strMarkRedPlus: function(search, subject) {
                return subject.replace(
                new RegExp('(' + search + ')', "gi"), "<span style='color: red;'><b>$1</b></span>");
            }


        });

        Ext.create('Fiddle.treeSample');
    }
});

Credit to : Ardi Firmansyah

Terima kasih dan semoga bermanfaat.

mazipan-signature

2 thoughts on “ExtJs – Tree Filter (Live Search) Example

  1. if i want to implementing that also (search parent node with that comes all child nodes with respective to parent) plz help me

    Like

Be a good reader, leave your comment please.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s