Question

我是ExtJs的新手，我正在玩构建逻辑以在Grid列上执行“实时搜索”。

从下面的代码中我可以将数据填充到网格中，但无法进行实时搜索功能。我不确定我在哪里错过逻辑。

    Ext.define('abc.view.EmployeePanel', {
    extend: 'Ext.window.Window',
    alias: 'widget.EmployeePanel',
    requires: [
        'Ext.tab.Panel',
        'Ext.form.*'],
          constructor: function () {
         this.callParent(arguments);
        },

        this. employeePopUPGridStore = new Ext.data.ArrayStore({
            fields: [
                {
                    name: 'empid',
                    type: 'number'
                },
                {
                    name: 'fname',
                    type: 'string'
                },
                {
                    name: 'lname',
                    type: 'string'
                },

            ],

        });

      this.employeePopUPGridStore.loadData(localAr, false);
        this.down('#addempgrid').bindStore(this.employeePopUPGridStore);
        this.down('#addempgrid').getView().refresh(); 
    },
    items: [{
           xtype:'textfield',
             name:'search',
             itemId:'search',
             emptyText:'Search by First Name / Last Name',
             listeners: {
            onTextFieldChange: function(field, newValue, oldValue, eOpts){
              var grid = field.down('addempgrid');
              grid.store.clearFilter();
               if (newValue) {
                  var matcher = new RegExp(Ext.String.escapeRegex(newValue), "i");
                  grid.store.filter({
                      filterFn: function(item) {
                          return matcher.test(item.get('empid')) ||
                              matcher.test(item.get('fname')) ||
                             matcher.test(item.get('job'));
                      }
                  });
              }
          }
         }
        },
        {
            xtype: 'gridpanel',
            itemId: 'addempgrid',
            autoHeight: true,
            columns: [

                {
                    header: "Employee ID",
                    flex: 1,
                    dataIndex: 'empid',

                },
                {
                    header: "Full Name",
                    flex: 3,
                    dataIndex: 'fname'
                },
                {
                    header: "LastName",
                    flex: 1,
                    dataIndex: 'lname'
                },


            ]

        }
    ] }
});

非常感谢任何帮助。

Answer 1

嗨请尝试一次..

  {
                    xtype: 'textfield',
                    itemId: 'searchBar',
                    cls: 'search-bar',
                    width: 230,
                    margin: '0 0 0 10',
                    listeners: {
                        buffer: 250,
                        scope: this,
                        change: function (field, newVal) {
                      var grid = field.down('addempgrid');
                         grid.store.clearFilter();
                if (newValue) {
                      var matcher = new RegExp(Ext.String.escapeRegex(newValue), "i");
                       grid.store.filter({
                        filterFn: function(item) {
                           return matcher.test(item.get('empid')) ||
                           matcher.test(item.get('fname')) ||
                           matcher.test(item.get('job'));

                         }
                     });
                    }

                }
            }
          }

希望它可以帮到你

在网格上实时搜索--ExtJs

1 个答案: