Planning and coding the grid search

To develop the plugin, we will create a menu where the user can select and deselect the columns of the grid, a text field where the user can write their search query, and a clear button that will help to clear the search query. At first we will develop the required UI fields and then we will add the corresponding functionality to those fields. Now let us start coding:

Ext.define("Examples.plugin.GridSearch", {

  extend : 'Ext.util.Observable',
  alias : 'plugin.gridsearch',

  config : {

    iconCls : 'icon-zoom',
    checkIndexes : "all",
    mode : 'local',
    minChars : 1,
    width : 100,
    searchText : 'Search',
    selectAllText : 'Select all',
    position: 'bottom' ,
    paramNames: {
      fields:'fields'
      ,query:'query'
    }

  },

  init : function(cmp) {

    this.grid = cmp.view.up('gridpanel');

    if (this.grid.rendered)
      this.onRender();
    else {
      this.grid.on('render', this.onRender, this);
    }

  },
…

You can see...