Search sencha touch expert for help with filter in store !

[gizmoone]

Hello

To finish my first application of training, I try understand the philosophy for the party blind.


I try to filter by the fields searchfield but not there arriving I already try by a simple function. That does not work not more.


An expert it can help me the objective being to do that correctly with the architecture MVC.
Thank you



app/view/FonctionList.js

Ext.define('proto.view.FonctionList', {    extend: 'Ext.List',
    xtype: 'fonctionlist',
	
    requires: ['proto.store.Fonctions',
	'Ext.field.Search',
	'Ext.plugin.ListPaging',
	'Ext.plugin.PullRefresh'],
    
    config: {
        title: 'Liste des fonctions',
        grouped: true,
        itemTpl: '{Name} {Id}',
        store: 'Fonctions',
        onItemDisclosure: true,
			handler: function(){
							var sto = Ext.getStore('Fonctions');

                                sto.clearFilter();
                                sto.filter('Name', 'AGENT');
							},
		
		items: [
                {
                    xtype: 'toolbar',
                    docked: 'top',


                    items: [
                        { xtype: 'spacer' },
                        {
                            xtype: 'searchfield',
                            placeHolder: 'Search...'
							
				
                        },
                        { xtype: 'spacer' }
                    ]
                }
            ]
    },
	
	


});

app/model/Fonction.js

Ext.define('proto.model.Fonction', {    extend: 'Ext.data.Model',
    config: {
	  fields: [
        	{ name: 'Id',              type: 'string' },
				{ name: 'Name',            type: 'string' },
				{ name: 'Description',     type: 'string' }
				 ]
    },


    fullName: function() {
        var d = this.data,
        names = [
   
			d.Name,
			d.Id
        ];
        return names.join(" ");
    }
});

app/store/Fonctions.js

Ext.define('proto.store.Fonctions', {    extend: 'Ext.data.Store',


    config: {
        model: 'proto.model.Fonction',
		sorters: 'Name',
		grouper : function(record) {
           
	        return record.get('Name')[0];
        },
		// proxy fichier 
        proxy: {
            type: 'ajax',
            url: 'data/liste.json',
    
			reader: {
                type: 'json',
                rootProperty: 'post'
            }
        },    
        autoLoad: true,
        
	}
});

app/controller/Fonction.js

Ext.define('proto.controller.Fonction', {    extend: 'Ext.app.Controller',


    config: {
        refs: {
            main: 'mainpanel'
        },
        control: {
            'fonctionlist': {
                disclose: 'showDetail'
            }
        }
    },


    showDetail: function(list, record) {
        this.getMain().push({
            xtype: 'fonctiondetail',
            title: record.fullName(),
            data: record.getData()
        })
    }


});

app/view/Fonction.js

Ext.define('proto.view.Fonction', {    extend: 'Ext.navigation.View',
    xtype: 'mainpanel',
	
    requires: [
        'proto.view.FonctionList',
        'proto.view.FonctionDetail'
    ],


    config: {
		title: 'Fonctions',
		iconCls: 'user',
        items:		[{
            xtype: 'fonctionlist'
			
        }]
    }
});

[mitchellsimoens]

Does that code filter at all? Are you wanting to know how to filter based on what you tapped on in the list?

handler isn't a config of the list also.

[gizmoone]

I want to filter the content of lists it with what is typed in the research zone.


But as I did not there arrive I tried to filter on the body previously but that does not work not more.
From which my request on the forum.


My question is therefore: how to configure the code to filter my list with what is typed in the research zone?


Thank you

[gizmoone]

Hello,
I succeeded let the filter work thanks to the reading of different blogs.
But the code isn't clean in the controller file.

I have in a second time tried to integrate the call of the functions in the party control but that does not work.

control: {            'fonctionlist': {
                disclose: 'showDetail'
            },
			'#contact_search': { 
                clearicontap: this.onSearchClearIconTap,  
                keyup: this.onSearchKeyUp  
               
			}

error message : Uncaught TypeError: Cannot call method 'apply' of undefined


here the file controller that works

Ext.define('proto.controller.Fonction', {    extend: 'Ext.app.Controller',


    config: {
        refs: {
            main: 'mainpanel'
        },
        control: {
            'fonctionlist': {
                disclose: 'showDetail'
            }
			
        }
    },


    showDetail: function(list, record) {
        this.getMain().push({
            xtype: 'fonctiondetail',
            title: record.fullName(),
            data: record.getData()
        })
    },
	
	  init: function() {


        this.control({


            '#contact_search':{  
                scope: this,
                clearicontap: this.onSearchClearIconTap,
                keyup: this.onSearchKeyUp
            }


        });
    },
    onSearchKeyUp: function(field) {
        
        var value = field.getValue(),
        store = Ext.getCmp('fonctionlist').getStore();    


        
        store.clearFilter();


        
        if (value) {
            
            var searches = value.split(' '),
            regexps = [],
            i;


            for (i = 0; i < searches.length; i++) {


                if (!searches[i]) continue;


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


            store.filter(function(record) {
                var matched = [];


                for (i = 0; i < regexps.length; i++) {
					
                              var search = regexps[i],
             didMatch = record.get('Name').match(search) ;//||
            
                               matched.push(didMatch);


                         } 
console.log(matched.length);
              if (regexps.length > 1 && matched.indexOf(false) != -1) {
                              return false;
                          } else {
                             return matched[0];
                            }
            });
        }
    },


    onSearchClearIconTap: function() {
        Ext.getCmp('fonctionlist').getStore().clearFilter();
    }
	
	


});

How to let the party go out control of the function init?

thanks