Searchfield

searchfield.js

Ext.reg('Ext.ux', 'Ext.ux.grid');

Ext.ux.grid.SearchField = Ext.extend(Ext.form.TwinTriggerField, {
   enableKeyEvents: true,
   checkIndexes: 'all',
   disableIndexes: [],
	showSelectAll: true,
   selectAllText: 'Select All',
   emptyText: 'Search',

   hideTrigger1: true,
   hideTrigger2: false,
   hideTrigger3: false,

   initComponent: function () {
      var me = this;
      if (!me.grid) {
         throw new Error('Missing required \'grid\' parameter');
      }

      me.store = me.grid.getStore();

      Ext.ux.grid.SearchField.superclass.initComponent.call(me);

      me.triggerConfig = {
         tag: 'span',
         cls: 'x-form-twin-triggers searchfield-triggers',
         cn: [
            { tag: 'img', src: Ext.BLANK_IMAGE_URL, cls: 'x-form-trigger x-form-clear-trigger' },
            { tag: 'img', src: Ext.BLANK_IMAGE_URL, cls: 'x-form-trigger x-form-search-trigger' },
            { tag: 'img', src: Ext.BLANK_IMAGE_URL, cls: 'x-form-trigger x-form-arrow-trigger' }
         ]
      };

      me.on('specialkey', function (k, e) {
         if (e.getKey() == e.ENTER) {
            me.onTrigger2Click();
         }

         if (e.getKey() == e.ESC) {
            me.onTrigger1Click();
         }
      });

      me.on('keyup', function (k, e) {
         if (me.getRawValue() != '') {
            me.toggleClearTrigger(true);
         } else {
            me.onTrigger1Click();
         }
      });
   },

   afterRender: function () {
      Ext.ux.grid.SearchField.superclass.afterRender.call(this);
     // this.toggleClearTrigger(false);
      this.getMenu();
   },

   onTrigger1Click: function () {
      var me = this,
          store = me.store;

      me.setValue('');

      store.clearFilter();
      me.toggleClearTrigger(false);
   },

   onTrigger2Click: function () {
      var me = this,
          store = me.store,
          val = me.getValue();

      if (val.length < 1) {
         me.onTrigger1Click();
         return;
      }
      
	   if ('local' === this.mode) {
         store.clearFilter();
         if (val) {
            store.filterBy(function (r) {
               var retval = false;
               me.menu.items.each(function (item) {
                  if (!item.checked || retval) {
                     return;
                  }
                  var rv = r.get(item.dataIndex);
                  rv = rv instanceof Date ? rv.format(this.dateFormat || r.fields.get(item.dataIndex).dateFormat) : rv;
                  var re = new RegExp(val, 'gi');
                  retval = re.test(rv);
               }, me);
               if (retval) {
                  return true;
               }
               return retval;
            });
         }
      } else {
	      if (store.lastOptions && store.lastOptions.params) {
	         store.lastOptions.params[store.paramNames.start] = 0;
	      }

	      var fields = [];
	      me.menu.items.each(function (item) {
	         if (item.checked) {
	            fields.push(item.dataIndex);
	         }
	      });

	      delete (store.baseParams[me.paramNames.fields]);
	      delete (store.baseParams[me.paramNames.query]);
	      if (store.lastOptions && store.lastOptions.params) {
	         delete (store.lastOptions.params[me.paramNames.fields]);
	         delete (store.lastOptions.params[me.paramNames.query]);
	      }
	      if (fields.length) {
	         store.baseParams[me.paramNames.fields] = Ext.encode(fields);
	         store.baseParams[me.paramNames.query] = val;
	      }

	      store.reload();
      }
   },

   onTrigger3Click: function () {
      var menu = this.getMenu();

      menu.show(this.triggers[2]);
   },

   getMenu: function () {
      var me = this;
      if (!me.menu) {
         me.menu = new Ext.menu.Menu({
            width: 110
         });

         if (me.showSelectAll && 'radio' !== me.menuStyle) {
	         me.menu.add(new Ext.menu.CheckItem({
	            text: me.selectAllText,
				   checked: !(me.checkIndexes instanceof Array),
				   hideOnClick: false,
				   handler: function (item) {
				      var checked = !item.checked;
				      item.parentMenu.items.each(function (i) {
				         if (item !== i && i.setChecked && !i.disabled) {
				            i.setChecked(checked);
				         }
				      });
				   }
	         }), '-');
	      }

         var cm = me.grid.colModel.config;
         Ext.each(cm, function (config) {
            if (config.header && config.dataIndex) {
               if (!me.disableIndexes || me.disableIndexes.indexOf(config.dataIndex) == -1) {
                  var checked = 'all' === me.checkIndexes;
                  if (Ext.isArray(me.checkIndexes)) {
                     if (me.checkIndexes.indexOf(config.dataIndex)) {
                        checked = true;
                     }
                  }
                  me.menu.add(new Ext.menu.CheckItem({
                     text: config.header,
                     hideOnClick: false,
                     checked: checked,
                     dataIndex: config.dataIndex
                  }));
               }
            }
         });
         me.menu.doLayout();
      }
      return me.menu;
   },

   toggleClearTrigger: function (state) {
      this.triggers[0][state ? 'show' : 'hide']();
   }
});
Ext.reg('ext.ux.grid.searchfield', Ext.ux.grid.SearchField);