Question

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

这是我的控制者 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" },


    ]
}

}）; 这是我的观点，在我的视图文件夹下，

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

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

}）;

仍在我的查看文件夹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的文件

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文件

Ext.application（{ 名称：'列表'，

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

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

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

}）;

很抱歉，我必须在这里发布我的整个应用程序，我只想尽可能详细地了解我的问题。目前，我当前的应用程序显示为此但搜索字段无法正常运行。我需要帮助，谢谢

my current output

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

感谢您的协助。

Answer 1

您实际上需要在搜索字段上侦听修改并根据值过滤商店。

这是您需要对控制器进行的修改：

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）并搜索它。

在Sencha Touch 2搜索列表中需要帮助

1 个答案: