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

Posted 2023-02-25

【中文标题】在 Sencha Touch 2 搜索列表中需要帮助

【英文标题】：Need Help In Sencah Touch 2 Search List

【发布时间】：2012-05-15 07:53:27

【问题描述】：

我在构建煎茶搜索列表时无法达到我想要的确切结果，我设法只构建了一个列表，但我想要的实际结果就像这样http://docs.sencha.com/touch/2-0/#!/example/search-list 我已经按照示例构建了类似的东西，但是我的 serach 无法正常工作，希望有人可以详细回答我如何实现这一目标。下面是我从控制器到最后的代码。

这是我的控制器 Ext.define('List.controller.Main', 扩展：'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.应用程序（ 名称：'列表'，

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

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

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

);

很抱歉，我必须在这里发布我的整个应用程序，我只是想让我的问题尽可能详细。目前，我当前的应用程序显示为这样，但搜索字段不起作用。我需要帮助，谢谢

我真的需要帮助。我希望达到的结果是这样的，这样一旦用户要搜索该字段，从 R 开始存储的名称列表都会显示出来：

感谢您的帮助。

【问题讨论】：

这里是 Sencha Touch 文档中演示的搜索列表代码try.sencha.com/touch/2.0.0/examples/list-search 希望对您有所帮助

【参考方案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）并针对它进行搜索。

【讨论】：

嗨，Grgur，我仍在等待您将字段添加到我的模型中，该模型将结合名字和姓氏。请帮帮我，谢谢

in Model: fields: ['firstName', 'middleInitial', 'lastName', name: 'fullName', mapping: 'firstName', convert: function (value, rec) return value + ' ' + rec.get('姓氏'); ]