Build List / Grid Searchfield

I want you to show a little tutorial how to create a searchfield to filter a list, grid or something else which has a relation to a store. I want to show this to you by using a list.

If you need you can download the Architect 3 project from here: https://mega.co.nz/#!9NFyRCLL!98dkUmISgGO_p0crDI8YExINmf5ORCglkDrWjuRyu7Y


First we create a Store with a model and some data in it. If you want to take a look, you'll have a link here: https://gist.github.com/difa1/9115899

Second we need to create a simple list in a panel:

Ext.define('MyApp.view.MyPanel', {
    extend: 'Ext.Panel',
    requires: [
        'Ext.dataview.List',
        'Ext.XTemplate'
    ],
    config: {
        layout: 'vbox',
        items: [
            {
                xtype: 'list',
                flex: 1,
                itemTpl: ['{name}, {namelast}'],
                store: 'persons'
            }
        ]
    }
});

Third we would like to implement the searchfield. You can place it however you want.

Ext.define('MyApp.view.MyPanel', {
    extend: 'Ext.Panel',
    requires: [
        'Ext.field.Search',
        'Ext.dataview.List',
        'Ext.XTemplate'
    ],
    config: {
        layout: 'vbox',
        items: [
            {
                xtype: 'searchfield',
                docked: 'top',
                itemId: 'storeSearchField',
                label: 'Field'
            },
            {
                xtype: 'list',
                flex: 1,
                itemId: 'mylist',
                itemTpl: ['{name}, {namelast}'],
                store: 'persons'
            }
        ]
    }
});

Now that the basics a build we build a new controller where all the logic is stored. So lets go to Step 4 and create the controller with 2 listeners: keyup and clearicontap:

Ext.define('MyApp.controller.logicController', {
    extend: 'Ext.app.Controller',
    config: {
        control: {
            "searchfield#storeSearchField": {
                clearicontap: 'onStoreSearchFieldClearicontap',
                keyup: 'onStoreSearchFieldKeyup'
            }
        }
    },
    onStoreSearchFieldClearicontap: function(textfield, e, eOpts) {

        // Logic
    },
    onStoreSearchFieldKeyup: function(textfield, e, eOpts) {

        // Logic
    }
});

The logic for the clearicontap is pretty simple... All we want is to clear all filters. All we need is the clearfilter method :

    onStoreSearchFieldClearicontap: function(textfield, e, eOpts) {
        Ext.getStore('persons').clearFilter();
    }

The keyup is a bit more tricky, why I like to use a basic function for it. I tried to explain all steps in the coding itself. If anything were unclear, you could contact me on Google+ ;)

onStoreSearchFieldKeyup: function(textfield, e, eOpts) {
    this.filterList(textfield, Ext.getStore('persons'));
},

filterList: function(textfield, store) {
    // Get the searchfield content
    var value = textfield.getValue();

    // Clear previous filters
    store.clearFilter();

    // Check for search value, if not present we don't need to to anything...
    if (value) {

        // Split search value: Space --> 2 custom values!
        var searches = value.split(' '),
        regexps = [],
        i;

        // Loop search values and build regex
        for (i = 0; i < searches.length; i++) {

            // Ignore spaces
           if (!searches[i]) continue;

           // Regex array
           regexps.push(new RegExp(searches[i], 'i'));
            
       }

       // Filter the store
       store.filter(function(record) {

           // Clear matches first
           var matched = [];

           // Loop all regex expressions
           for (i = 0; i < regexps.length; i++) {
               var search = regexps[i];
               var didMatch;

              didMatch = record.get('name').match(search) ||
                         record.get('namelast').match(search);
                    // You can add as many model fields as you want! --> record.get('city1').match(search) ||


              // Write match to array
              matched.push(didMatch);
          }

          // Nothing found? Do not return anything ;)
          if (regexps.length > 1 && matched.indexOf(false) != -1) {

               return false;

          } else {

               // Found something? Just return to store ;)
               return matched[0];

          }
     });

     // Finally load store
     store.load();
}