Caricamento dinamico della lista in sencha touch 2

Question

Ho un'app Sencha Touch 2.0 configurata con un layout di scheda. Contiene una dashboard con icone su cui l'utente può fare clic e un elenco di clienti (xtype: 'list'). Quando l'app viene caricata, carico tutte le "carte" nell'app incluso l'elenco clienti, ma non carico i dati (tramite proxy) a meno che non sia impostata una variabile localStorage. Dopo che tutto è stato caricato, controllo per vedere se l'utente deve essere loggato automaticamente controllando la variabile localStorage. Se vengono registrati automaticamente, la mia app funziona perfettamente. Se non lo sono mostro loro la scheda "login", che è fondamentalmente un form di login. Una volta inviato questo modulo di accesso, eseguo una chiamata ajax. Se questo torna correttamente li mando alla scheda "dashboard". Ma prima sto cercando di caricare l'elenco dei clienti tramite una chiamata ajax utilizzando:

var tmpId = { id: example.id };

var cListStore = Ext.create('example.store.CustomerList');
cListStore.getProxy().setExtraParams(tmpid);
cListStore.load();

Con il codice sopra posso vedere che la mia chiamata proxy è in corso e posso vedere che la risposta è corretta. Tuttavia, quando vedo la dashboard e faccio clic sull'icona Clienti, vedo un elenco vuoto. La mia barra degli strumenti è lì e anche la indexBar sulla mia lista è lì, solo nessun dato. Non sono sicuro di cosa sto facendo di sbagliato qui. Includo la mia visualizzazione elenco, negozio e modello di seguito, si spera che possa aiutare chiunque guardi questo:

Ext.define('example.view.CustomerList', {
    extend: 'Ext.Container',
    id: 'customerListContainer',
    xtype: 'customerlist',
    config: {
        layout: 'fit',
        items: [{
            xtype: 'toolbar',
            docked: 'top',
            title: 'Customers',
            items: [{
                xtype: 'button',
                text: 'Home',
                id: 'customerListHomeButton',
                ui: 'back'
            }]
        }, {
            xtype: 'list',
            itemTpl: '<div class="contact">{first_name} <strong>{last_name}</strong>  </div>',
            store: 'CustomerList',
            id: 'customer_list',
            grouped: true,
            indexBar: true
        }]
    }
});

Ext.define('example.store.CustomerList', {
    extend: 'Ext.data.Store',
    id: 'customerListStore',
    requires: ['example.model.CustomerList'],
    config: {
        model: 'example.model.CustomerList',
        sorters: 'last_name',
        /*
         * This actually makes the ajax request
         */
        proxy: {
            type: 'ajax',
            url: '/example/api/customerList.php',
            extraParams: {
                id: example.id
            },
            reader: {
                type: 'json'
            }
        },
        autoLoad: ((example.id > 0) ? true : false), //only fetch the data if we have a id, or else we'll get an error from our api

        /*
         * Set the group headers to the first letter of the last name
         */
        grouper: {
            groupFn: function (record) {
                return record.get('last_name')[0];
            }
        }
    }
});

Ext.define('example.model.CustomerList', {
    extend: 'Ext.data.Model',
    config: {
        /*
         * Define the fields we get back from our ajax request
         */
        fields: [
            'first_name',
            'last_name',
            'address1',
            'address2',
            'city',
            'state',
            'zip_code',
            'phone_daytime',
            'phone_evening',
            'phone_cell',
            'email']
    }
});

Ho anche provato a mettere un storeId nel negozio Elenco clienti e quindi utilizzare il codice seguente invece di chiamare Ext.create ():

Ext.StoreManager.get('storeid').load()

Questo ha prodotto gli stessi risultati. Ho potuto vedere che il proxy stava recuperando i dati correttamente ma stava ancora eseguendo il rendering nel mio componente elenco.

Answer 1

Ho capito, ho rimosso queste righe:

var cListStore = Ext.create('example.store.CustomerList');
cListStore.getProxy().setExtraParams(tmpid);
cListStore.load();

e ho aggiunto quanto segue al suo posto:

Ext.getStore('CustomerList').getProxy().setExtraParams(tmpid);
Ext.getStore('CustomerList').load();

Fondamentalmente non avevo bisogno di creare una nuova istanza del mio negozio, ne era già stata creata una, quindi avevo solo bisogno di un modo per identificarla (Ext.getStore) e quindi caricarla.Grazie per tutti coloro che hanno esaminato la questione.

Answer 2

Non sono un esperto di Sencha Touch 2, ma vedo che hai impostato il tuo elenco di negozi su

store: 'CustomerList'

E mi chiedo cosa sia CustomerList.Non dovresti impostare il negozio dell'elenco su customerListStore, che è l'ID del tuo negozio?