Lista de carregamento dinâmico no sencha touch 2

Question

Eu tenho um aplicativo Sencha Touch 2.0 que é configurado com um layout de cartão. Ele contém um painel com ícones nos quais o usuário pode clicar e uma lista de clientes (xtype: 'lista'). Quando o aplicativo é carregado, carrego todos os 'cartões' no aplicativo, incluindo a Lista de clientes, mas não carrego os dados (via proxy) a menos que uma variável localStorage seja definida. Depois que tudo é carregado, verifico se o usuário deve estar logado automaticamente, verificando a variável localStorage. Se eles estiverem logados automaticamente, meu aplicativo funcionará perfeitamente. Se não forem, mostro a eles o cartão de "login", que é basicamente um formulário de login. Assim que eles enviarem este formulário de login, realizo uma chamada ajax. Se isso voltar corretamente, eu os envio para o cartão "painel". Mas antes disso, estou tentando carregar a lista de clientes por meio de uma chamada ajax usando:

var tmpId = { id: example.id };

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

Com o código acima, posso ver que minha chamada de proxy está acontecendo e posso ver que a resposta está correta. No entanto, quando vejo o painel e clico no ícone Clientes, vejo uma lista vazia. Minha barra de ferramentas está lá e até mesmo o indexBar na minha lista está lá, apenas sem dados. Não tenho certeza do que estou fazendo de errado aqui. Estou incluindo minha visualização de lista, loja e modelo abaixo, espero que isso ajude quem olhar para isso:

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

Também tentei colocar um storeId na loja da Lista de clientes e usar o seguinte código em vez de chamar Ext.create ():

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

Isso produziu os mesmos resultados. Pude ver que o proxy estava obtendo os dados corretamente, mas ainda estava processando no meu componente de lista.

Answer 1

Eu descobri, removi estas linhas:

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

e adicionamos o seguinte em seu lugar:

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

Basicamente não precisei criar uma nova instância da minha loja, uma já foi criada, então eu só precisava de uma forma de identificá-la (Ext.getStore) e carregá-la.Obrigado a todos que investigaram isso.

Answer 2

Não sou nenhum especialista em Sencha Touch 2, mas vejo que você definiu sua lista de armazenamento para

store: 'CustomerList'

E estou me perguntando o que é CustomerList.Você não deveria definir a loja da lista como customerListStore, que é o id da sua loja?