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

问题描述

我有问题达到我想要建立一个sencha搜索列表的确切结果，我设法只建立一个列表，但我想要的实际结果就是这样的一个这样的 http://docs.sencha.com/touch/2-0/#!/example/search-list

这是我的控制器
Ext.define（'List.controller.Main'，{
扩展：'Ext.app.Controller'，

  config：{
 refs：{
 main ：'mainpanel'
}，
 control：{
'presidentlist'：{
 disclosure：'showDetail'
} 
} 
} ，
 
 showDetail：function（list，record）{
 this.getMain（）。push（{
 xtype：'presidentdetail'，
 title：record.fullName （），
 data：record.getData（）
}）
} 
  

）
这是我的模型

  Ext.define（'List.model.President'，{
 extends ：'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'，{
 extends：'Ext.data.Store'，
 
 config：{
 model：'List.model.President'，
分类：'lastName'，
分类器：function（record）{
 return record.get（'lastName'）[0]; 
}，
 data：[
 {firstName：George，lastName：Washington}，
 {firstName：John，lastName：Adams}，
 {firstNam e：Thomas，lastName：Jefferson}，
 {firstName：James，lastName：Madison}，
 
 
] 
} 
  

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

  Ext.define（'List.view.Main' {
 extends：'Ext.navigation.View'，
 xtype：'mainpanel'，
 require：[
'List.view.PresidentList'，
'List .view.PresidentDetail'
]，
 
 config：{
 items：[{
 xtype：'presidentlist'
}] 
} 
  

}）;

查看文件夹PresidentDetail

  Ext.define（'List.view.PresidentDetail'，{
 extends：'Ext.Panel '，
 xtype：'presidentdetail'，
 
 config：{
 title：'Details'，
 styleHtmlContent：true，
 scrollable：'vertical' ，
 tpl：[
'Why not Work {firstName} {lastName}！'
] 
} 
  

}）;

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

  Ext.define（'Lis t.view.PresidentList'，{
 extends：'Ext.List'，
 xtype：'presidentlist'，
要求：['List.store.Presidents']，
 
 config：{
 xtype：'container'，
 title：'Why not Work'，
 grouping：true，
 itemTpl：'{firstName} {lastName} '，
 styleHtmlContent：true，
 store：'Presidents'，
 onItemDisclosure：true，
 
 items：[
 
 {
 
 xtype：'searchfield'，
名称：'searchfield'，
 placeHolder：'搜索'，
}，
 
 {
 
 xtype：'spacer'，
 height：25 
}，
] 
} 
  

}）;

这是我的App.js文件

Ext.application（{
name：'List'，

 需要：[
' Ext.field.Search'
]，
 
 controllers：[' Main']，
 views：['Main']，
 stores：['Presidentidents]，
 models：['President']，
 
 launch： function（）{
 Ext.Viewport.add（{
 xtype：'mainpanel'
}）; 
} 
  

}）;

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

我真的需要帮助。我希望实现的结果是这样的，所以一旦用户要搜索字段，从R开始存储的名称列表将全部显示：

解决方案

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

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

  config：{
 refs：{
 main：'mainpanel'
}，
 control：{
'presidentlist'：{
 disclosure：'showDetail'
}，
 
'searchfield'：{
 keyup：'doSearch'
} 
} 
}，
 
 showDetail：function（list，record）{
 this.getMain（）。push（{
 xtype：'presidentdetail'，
标题：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）并搜索它。

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.

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

}); This is my model

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

});

this is my store

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

});

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

});

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

});

This is my App.js file

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

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:

Thanks for your assistance.

解决方案

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

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屋！