extjs - Need Help In Sencah Touch 2 Search List

Question

i have problem achieving the exact result i want in building a sencha Search List, i managed to build just a list but the actual result i want is just something like this http://docs.sencha.com/touch/2-0/#!/example/search-list i have followed the example to build something similar, but my serach is not working, hope somebody can give me a detailed answer on how to achive this. below are my codes from my controller to the last.

this is my controller Ext.define('List.controller.Main', { extend: 'Ext.app.Controller',

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

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

}); This is my model

Ext.define('List.model.President', {
extend: 'Ext.data.Model',
config: {
    fields: ['firstName', 'middleInitial', 'lastName']
},

fullName: function() {
    var d = this.data,
    names = [
        d.firstName,
        (!d.middleInitial ? "" : d.middleInitial + "."),
        d.lastName
    ];
    return names.join(" ");
}

});

this is my store

Ext.define('List.store.Presidents', {
extend: 'Ext.data.Store',

config: {
    model: 'List.model.President',
    sorters: 'lastName',
    grouper : function(record) {
        return record.get('lastName')[0];
    },
    data: [
        { firstName: "George", lastName: "Washington" },
        { firstName: "John", lastName: "Adams" },
        { firstName: "Thomas", lastName: "Jefferson" },
        { firstName: "James", lastName: "Madison" },


    ]
}

}); this is my views, under my view folder,

Ext.define('List.view.Main', {
extend: 'Ext.navigation.View',
xtype: 'mainpanel',
requires: [
    'List.view.PresidentList',
    'List.view.PresidentDetail'
],

config: {
    items: [{
        xtype: 'presidentlist'
    }]
}

});

still under my view folder PresidentDetail

Ext.define('List.view.PresidentDetail', {
extend: 'Ext.Panel',
xtype: 'presidentdetail',

config: {
    title: 'Details',
    styleHtmlContent: true,
    scrollable: 'vertical',
    tpl: [
        'Why Not Work {firstName}  {lastName}!'
    ]
}

});

still under my view folder i have another file called PresidentList

Ext.define('List.view.PresidentList', {
extend: 'Ext.List',
xtype: 'presidentlist',
requires: ['List.store.Presidents'],

config: {
     xtype:'container',
    title: 'Why Not Work',
    grouped: true,
    itemTpl: '{firstName} {lastName}',
    styleHtmlContent: true,
    store: 'Presidents',
    onItemDisclosure: true,

     items: [

            {

            xtype: 'searchfield',
                name:'searchfield',
                placeHolder:'Search',
            },

         {

            xtype: 'spacer',
               height: 25
            },
           ] 
}

});

This is my App.js file

Ext.application({ name: 'List',

requires: [
    'Ext.field.Search'
],

controllers: ['Main'],
views:  ['Main'],
stores: ['Presidents'],
models: ['President'],

launch: function() {
    Ext.Viewport.add({
        xtype: 'mainpanel'
    });
}

});

Am sorry i have to post my whole app here, am just trying to get my qestion as detailed as possible. at the moment, my current app displays as this but the search field is not functioning. i need help please thanks

i seriously need help please. the result i wish to achieve is something like this so that once the user is about to search the field, the list of the names stored starting from R will all show up:

Thanks for your assistance.

Answer 1

You actually need to listen for modifications on search field and filter the store based on the value.

This is the kind of modification you need to make to your controller:

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

        'searchfield': {
            keyup: 'doSearch'
        }
    }
},

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

doSearch: function(field) {
    var value   = field.getValue(),
        store   = this.getPresidentList().getStore(),
        query   = new RegExp(value, 'i');

    store.filter('firstName', query)
}

Also, I would add another field to the model that combines first and last name (e.g. fullName) and search against it.