The LiveSearchGridPanel extension

Ext.ux.LiveSearchGridPanel is a GridPanel class that supports live search.

Here, in the following code, a grid panel class is defined by extending the LiveSearchGridPanel extension:

Ext.define('Examples.view.livesearch.LiveSearchGrid', {
  extend : 'Ext.ux.LiveSearchGridPanel',
  alias : 'widget.livesearchgrid',
  requires : ['Examples.store.DummyStore'],

  constructor : function(config) {

    Ext.apply(this, { 
      border : false,
      store : Ext.create('Examples.store.DummyStore'),
      columns : [{
        header : 'Name',
        dataIndex : 'name',
        flex : 1
      },{
        header : 'Birth date',
        dataIndex : 'birthdate',
        renderer : Ext.util.Format.dateRenderer('m/d/Y'),
        flex : 1
      }]
    });

    this.callParent(arguments);

  }
});

In the following screenshot you can see the result of the LiveSearchGrid class that we have defined, which is used within a window:

You can see that a grid panel with a Search input...