    /**
     * A GridPanel class with live search support.
     * @author Nicolas Ferrero
     */
    Ext.define('Ext.ux.LiveSearchGridPanel', {
        extend: 'Ext.grid.Panel',
        requires: [
            'Ext.toolbar.TextItem',
            'Ext.form.field.Checkbox',
            'Ext.form.field.Text',
            'Ext.ux.statusbar.StatusBar'
        ],

        /**
         * @private
         * search value initialization
         */
        searchValue: null,

        /**
         * @private
         * The row indexes where matching strings are found. (used by previous and next buttons)
         */
        indexes: [],

        /**
         * @private
         * The row index of the first search, it could change if next or previous buttons are used.
         */
        currentIndex: null,

        /**
         * @private
         * The generated regular expression used for searching.
         */
        searchRegExp: null,

        /**
         * @private
         * Case sensitive mode.
         */
        caseSensitive: false,

        /**
         * @private
         * Regular expression mode.
         */
        regExpMode: false,

        /**
         * @cfg {String} matchCls
         * The matched string css classe.
         */
        matchCls: 'x-livesearch-match',

        defaultStatusText: 'Nothing Found',

        // Component initialization override: adds the top and bottom toolbars and setup headers renderer.
        initComponent: function() {
            var me = this;
            me.tbar = ['Search',{
                     xtype: 'textfield',
                     name: 'searchField',
                     hideLabel: true,
                     width: 200,
                     listeners: {
                         change: {
                             fn: me.onTextFieldChange,
                             scope: this,
                             buffer: 100
                         }
                     }
                }, {
                    xtype: 'button',
                    text: '&lt;',
                    tooltip: 'Find Previous Row',
                    handler: me.onPreviousClick,
                    scope: me
                },{
                    xtype: 'button',
                    text: '&gt;',
                    tooltip: 'Find Next Row',
                    handler: me.onNextClick,
                    scope: me
                }, '-', {
                    xtype: 'checkbox',
                    hideLabel: true,
                    margin: '0 0 0 4px',
                    handler: me.regExpToggle,
                    scope: me
                }, 'Regular expression', {
                    xtype: 'checkbox',
                    hideLabel: true,
                    margin: '0 0 0 4px',
                    handler: me.caseSensitiveToggle,
                    scope: me
                }, 'Case sensitive'];

            me.bbar = Ext.create('Ext.ux.StatusBar', {
                defaultText: me.defaultStatusText,
                name: 'searchStatusBar'
            });

            me.callParent(arguments);
        },

        // afterRender override: it adds textfield and statusbar reference and start monitoring keydown events in textfield input
        afterRender: function() {
            var me = this;
            me.callParent(arguments);
            me.textField = me.down('textfield[name=searchField]');
            me.statusBar = me.down('statusbar[name=searchStatusBar]');
        },
        // detects html tag
        tagsRe: /<[^>]*>/gm,

        // DEL ASCII code
        tagsProtect: '\x0f',

        // detects regexp reserved word
        regExpProtect: /\\|\/|\+|\\|\.|\[|\]|\{|\}|\?|\$|\*|\^|\|/gm,

        /**
         * In normal mode it returns the value with protected regexp characters.
         * In regular expression mode it returns the raw value except if the regexp is invalid.
         * @return {String} The value to process or null if the textfield value is blank or invalid.
         * @private
         */
        getSearchValue: function() {
            var me = this,
                value = me.textField.getValue();

            if (value === '') {
                return null;
            }
            if (!me.regExpMode) {
                value = value.replace(me.regExpProtect, function(m) {
                    return '\\' + m;
                });
            } else {
                try {
                    new RegExp(value);
                } catch (error) {
                    me.statusBar.setStatus({
                        text: error.message,
                        iconCls: 'x-status-error'
                    });
                    return null;
                }
                // this is stupid
                if (value === '^' || value === '$') {
                    return null;
                }
            }

            return value;
        },

        /**
         * Finds all strings that matches the searched value in each grid cells.
         * @private
         */
         onTextFieldChange: function() {
             var me = this,
                 count = 0;

             me.view.refresh();
             // reset the statusbar
             me.statusBar.setStatus({
                 text: me.defaultStatusText,
                 iconCls: ''
             });

             me.searchValue = me.getSearchValue();
             me.indexes = [];
             me.currentIndex = null;

             if (me.searchValue !== null) {
                 me.searchRegExp = new RegExp(me.searchValue, 'g' + (me.caseSensitive ? '' : 'i'));

                 me.store.each(function(record, idx) {
                     var td = Ext.fly(me.view.getNode(idx)).down('td'),
                         cell, matches, cellHTML;
                     while(td) {
                         cell = td.down('.x-grid-cell-inner');
                         matches = cell.dom.innerHTML.match(me.tagsRe);
                         cellHTML = cell.dom.innerHTML.replace(me.tagsRe, me.tagsProtect);

                         // populate indexes array, set currentIndex, and replace wrap matched string in a span
                         cellHTML = cellHTML.replace(me.searchRegExp, function(m) {
                            count += 1;
                            if (Ext.Array.indexOf(me.indexes, idx) === -1) {
                                me.indexes.push(idx);
                            }
                            if (me.currentIndex === null) {
                                me.currentIndex = idx;
                            }
                            return '<span class="' + me.matchCls + '">' + m + '</span>';
                         });
                         // restore protected tags
                         Ext.each(matches, function(match) {
                            cellHTML = cellHTML.replace(me.tagsProtect, match);
                         });
                         // update cell html
                         cell.dom.innerHTML = cellHTML;
                         td = td.next();
                     }
                 }, me);

                 // results found
                 if (me.currentIndex !== null) {
                     me.getSelectionModel().select(me.currentIndex);
                     me.statusBar.setStatus({
                         text: count + ' matche(s) found.',
                         iconCls: 'x-status-valid'
                     });
                 }
             }

             // no results found
             if (me.currentIndex === null) {
                 me.getSelectionModel().deselectAll();
             }

             // force textfield focus
             me.textField.focus();
         },

        /**
         * Selects the previous row containing a match.
         * @private
         */
        onPreviousClick: function() {
            var me = this,
                idx;

            if ((idx = Ext.Array.indexOf(me.indexes, me.currentIndex)) !== -1) {
                me.currentIndex = me.indexes[idx - 1] || me.indexes[me.indexes.length - 1];
                me.getSelectionModel().select(me.currentIndex);
             }
        },

        /**
         * Selects the next row containing a match.
         * @private
         */
        onNextClick: function() {
             var me = this,
                 idx;

             if ((idx = Ext.Array.indexOf(me.indexes, me.currentIndex)) !== -1) {
                me.currentIndex = me.indexes[idx + 1] || me.indexes[0];
                me.getSelectionModel().select(me.currentIndex);
             }
        },

        /**
         * Switch to case sensitive mode.
         * @private
         */
        caseSensitiveToggle: function(checkbox, checked) {
            this.caseSensitive = checked;
            this.onTextFieldChange();
        },

        /**
         * Switch to regular expression mode
         * @private
         */
        regExpToggle: function(checkbox, checked) {
            this.regExpMode = checked;
            this.onTextFieldChange();
        }
    });