在 Sencah Touch 2 搜索列表中需要帮助 [英] Need Help In Sencah Touch 2 Search List

问题描述

我在构建 sencha 搜索列表时无法获得我想要的确切结果，我设法构建了一个列表，但我想要的实际结果就像这样 http://docs.sencha.com/touch/2-0/#!/example/search-list 我已经按照示例构建了类似的东西，但是我的 serach 不起作用，希望有人能给我一个关于如何实现这一点的详细答案.下面是我从控制器到最后的代码.

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.

这是我的控制器Ext.define('List.controller.Main', {扩展:'Ext.app.Controller',

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

});这是我的模型

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

});

这是我的商店

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'
    }]
}

});

仍在我的视图文件夹中PresidentDetail

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}!'
    ]
}

});

仍然在我的视图文件夹下，我有另一个名为 PresidentList 的文件

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

});

这是我的 App.js 文件

This is my App.js file

外部应用程序({name: '列表',

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

我非常需要帮助.我希望实现的结果是这样的，这样一旦用户要搜索该字段，从 R 开始存储的名称列表将全部显示:

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:

感谢您的帮助.

推荐答案

您实际上需要监听对搜索字段的修改并根据值过滤商店.

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

此外，我会向模型中添加另一个字段，该字段结合了名字和姓氏(例如 fullName)并对其进行搜索.

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

这篇关于在 Sencah Touch 2 搜索列表中需要帮助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！