如何在 Sencha Touch 2 中制作搜索列表？商店已经定义

Posted 2023-02-25

【中文标题】如何在 Sencha Touch 2 中制作搜索列表？商店已经定义

【英文标题】：How to make a search list in Sencha Touch 2? Store already define

【发布时间】：2012-07-16 21:24:23

【问题描述】：

你好 *** 社区，

是的，我知道，其他人也有同样的问题，但他们在同一个文件中定义了商店，sencha touch 2 的示例对我有用，但是当我尝试将此代码应用于我的时，我得到了这个错误：

Uncaught SyntaxError: Unexpected identifier Alertas.js:105 Uncaught 错误：以下类未声明，即使它们的文件有 已加载：'myMoney.view.Alertas'。请检查源代码 他们对应的文件可能的错别字：'app/view/Alertas.js

我认为我需要以另一种方式给我的商店打电话，但这是我的问题：

如何调用已为搜索列表定义的商店？

这是我的代码：

Ext.define('myMoney.view.Alertas',
extend: 'Ext.navigation.View',
fullscreen: true,
scrollable: true,
stylehtmlContent: true,
xtype: 'alertas',

config: 
    title: 'Contactos',
    iconCls: 'bookmarks',

    items: [
        
            xtype: 'list',
            grouped: true,
            ui: 'round',
            title: 'Contactos',
            fullscreen: true,
            itemTpl: 'title',
            styleHtmlCls: true,
            //cls: 'x-contacts',
            store: 'Contactos',
            itemTpl: [
                '<div class="headshot" style="background-image:url(resources/images/headshots/headshot);"></div>',
                'firstName lastName',
                '<span>title</span>'
            ].join(''),

            items: [
                
                    xtype: 'searchfield',
                    placeHolder: 'Buscar contacto...',
                    listeners: 
                        scope: this,
                        clearicontap: this.onSearchClearIconTap,
                        keyup: this.onSearchKeyUp
                    
                ,
            ]
        ,
    ]
,

/**
 * Llamado cuando la barra de busqueda tiene un evento keyup
 */
onSearchKeyUp: function(field) 
    //Se obtiene el store y el valor del field
    var value = field.getValue(),
        //store = this.getStore();
            //NOW:
            store = Ext.data.StoreManager.lookup('Contactos');

    //se limpian los filtros actuales del store para comenzar la nueva busqueda
    store.clearFilter();

    //Verificamos que el valor tenga alguna  modificacion
    if (value) 
        //El usuario pudo haber introducido espacion en blanco,asi que los cortamos para poder recorrer todo el valor 
        var searches = value.split(' '),
            regexps = [],
            i;

        //recorremos todo el valor
        for (i = 0; i < searches.length; i++) 
            //si no hay nada continuamos
            if (!searches[i]) continue;

            //Si encontramos algo creamos una expresion regular que es sensible a mayusculas
            regexps.push(new RegExp(searches[i], 'i'));
        

        //Ahora se filtra el store
        //El metodo se pasara a cada record en el store
        store.filter(function(record) 
            var matched = [];

            //Iteramos a traves de cada expresion regular
            for (i = 0; i < regexps.length; i++) 
                var search = regexps[i],
                    didMatch = record.get('firstName').match(search) || record.get('lastName').match(search);

                //Si coincide el primer o ultimo nombre se coloca en la lista de los que coinciden
                matched.push(didMatch);
            

            //Si nada se consigue no se retorna nada
            if (regexps.length > 1 && matched.indexOf(false) != -1) 
                return false;
             else 
                //Si no se muestra lo que se encontro
                return matched[0];
            
        );
    
,
/**
 * Llamado cuando el usuario presiona el icono de 'x' en la barra de busqueda
 * Solo que quitan los filtros del store
 */
onSearchClearIconTap: function() 
    //this.getStore().clearFilter();
        //NOW:
        store = Ext.data.StoreManager.lookup('Contactos');

/**
 * Metodo llamado para tomar el store
 */
      //I DELETE THIS FUNCTION
/*getStore: function() 
        this.store = 'myMoney.store.Contactos'*/

);

【问题讨论】：

只是一个建议：如果两个不同的文件，您应该使用 MVC 结构并拥有您的视图和控制器。会清楚很多。

我使用控制器，但在这里我想让这段代码正常工作，我试图弄清楚它们：/（我现在是菜鸟）:(

【参考方案1】：

请小心 getter :)

getStore: function() 
        this.store = 'myMoney.store.Contactos'

我认为它打算返回商店，而不仅仅是分配给班级成员。

onSearchKeyUp: function(field) 
    //Se obtiene el store y el valor del field
    var value = field.getValue(),
        store = this.getStore();  // undefined

变量 store 总是未定义...

【参考方案2】：

您需要使用Ext.StoreManager，才能通过id使用指定的商店。

示例：

与这家商店：

Ext.create('Ext.data.Store', 
    model: 'SomeModel',
    storeId: 'myStore'
);

使用

var store = Ext.data.StoreManager.lookup('myStore');

或在视图中使用它：

Ext.create('Ext.view.View', 
    store: 'myStore',
    // other configuration here
);

【讨论】：

好吧，现在我没有“存储未定义”的问题，但代码不起作用..如果你能看到..我有一个商店已经定义（'Contactos'）并且我的列表可以加载信息。但是搜索字段不起作用..：/我有这个错误：Uncaught TypeError: Cannot read property 'fn' of undefined

请查看我的代码的更新 ^^（//现在：我写了更改）我不知道我是否想做其他事情

Uncaught TypeError: Cannot read property 'fn' of undefined - 如果我评论“listeners:”块代码，这个错误就消失了

【参考方案3】：

NeoMorfeo 以上代码仅在获取商店价值方面是正确的

您需要使用Ext.StoreManager，才能通过id使用指定的商店。

示例：

与这家商店：

Ext.create('Ext.data.Store', 
    model: 'SomeModel',
    storeId: 'myStore'
);

使用

var store =  Ext.getStore('myStore');

或在视图中使用它：

Ext.create('Ext.view.View', 
    store: 'myStore',
    // other configuration here
);