2

我在构建煎茶搜索列表时无法达到我想要的确切结果，我设法只构建了一个列表，但我想要的实际结果就像这样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({ name: 'List',

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

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

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

});

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

我当前的输出

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

感谢你的协助。

4

1 回答 1

2

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

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

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）并对其进行搜索。

于 2012-05-15T08:35:43.477 回答