text: /**
   * 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: 500
                       }
                   }
              }, {
                  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();
      }
  });