sencha-touch - full - sencha touch download

Necesita ayuda en Sencah Touch 2 Search List

Question

Tengo problemas para lograr el resultado exacto que quiero al crear una lista de búsqueda sencha, logré construir solo una lista, pero el resultado real que deseo es algo como esto http://docs.sencha.com/touch/2-0/ #! / example / search-list He seguido el ejemplo para construir algo similar, pero mi búsqueda no funciona, espero que alguien me pueda dar una respuesta detallada sobre cómo lograr esto. a continuación están mis códigos desde mi controlador hasta el último.

este es mi controlador Ext.define (''List.controller.Main'', {extender: ''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()
    })
}

}); Este es mi modelo

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(" ");
}

});

esta es mi tienda

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" },


    ]
}

}); este es mi punto de vista, en mi carpeta de vista,

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

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

});

aún bajo mi carpeta de vista PresidentDetail

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

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

});

Todavía en mi carpeta de vista tengo otro archivo llamado 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
            },
           ] 
}

});

Este es mi archivo App.js

Ext.application ({name: ''List'',

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

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

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

});

Lamento tener que publicar toda mi aplicación aquí, estoy tratando de que mi respuesta sea lo más detallada posible. en este momento, mi aplicación actual se muestra así, pero el campo de búsqueda no está funcionando. Necesito ayuda por favor gracias

realmente necesito ayuda por favor. el resultado que deseo lograr es algo como esto, de modo que una vez que el usuario esté a punto de buscar en el campo, se muestre la lista de los nombres almacenados a partir de R:

Gracias por tu ayuda.

Answer 1

De hecho, necesita escuchar las modificaciones en el campo de búsqueda y filtrar la tienda según el valor.

Este es el tipo de modificación que necesita hacerle a su controlador:

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)
}

Además, agregaría otro campo al modelo que combine nombre y apellido (por ejemplo, nombre completo) y busque en contra de él.