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