js/form/FilterField.js

   1 Ext.define('PMG.form.FilterField', {
   2     extend: 'Ext.form.field.Text',
   3     alias: 'widget.pmgFilterField',
   4
   5     // the store to filter
   6     // optional, if not given the first parent grids store will be used
   7     store: undefined,
   8
   9     // a list of fields of the records that will be searched
  10     // a field can be a string (dataIndex) or an object with 'name' and 'renderer'
  11     // the renderer will be used before testing the field
  12     filteredFields: [],
  13
  14     fieldLabel: gettext('Filter'),
  15     labelAlign: 'right',
  16
  17     triggers: {
  18         clear: {
  19             cls: 'pmx-clear-trigger',
  20             hidden: true,
  21             handler: function() {
  22                 let me = this;
  23                 me.setValue('');
  24                 me.triggers.clear.setVisible(false);
  25             },
  26         },
  27     },
  28
  29     listeners: {
  30         change: function(field, value) {
  31             let me = this;
  32             let grid = me.up('grid');
  33             if (!me.store) {
  34                 me.store = grid.getStore();
  35             }
  36
  37             me.store.clearFilter();
  38             field.triggers.clear.setVisible(value.length > 0);
  39
  40             if (value) {
  41                 me.store.filterBy((rec) => me.filteredFields.some((fieldDef) => {
  42                     let fieldname = fieldDef, renderer = Ext.identityFn;
  43                     if (Ext.isObject(fieldDef)) {
  44                         fieldname = fieldDef.name;
  45                         renderer = fieldDef.renderer;
  46                     }
  47                     let testedValue = renderer(rec.data[fieldname]);
  48                     return testedValue.toString().toLowerCase().indexOf(value.toLowerCase()) !== -1;
  49                 }));
  50             }
  51         },
  52     },
  53
  54 });