Dynamically loading list in sencha touch 2
I figured it out, I removed these lines:
var cListStore = Ext.create('example.store.CustomerList');
cListStore.getProxy().setExtraParams(tmpid);
cListStore.load();
and I added the following in its place:
Ext.getStore('CustomerList').getProxy().setExtraParams(tmpid);
Ext.getStore('CustomerList').load();
Basically I didn't need to create a new instance of my store, one was already created so I just needed a way to identify it (Ext.getStore) and then load it. Thanks for everyone who looked into it.
jb1785
Updated on September 01, 2022Comments
-
jb1785 almost 2 years
I have a Sencha Touch 2.0 app that is set up with a card layout. It contains a dashboard with icons the user can click on and a customer list (xtype: 'list'). When the app is loaded I load all of the 'cards' in the app including the Customer List, but I don't load the data (via proxy) unless a localStorage variable is set. After everything is loaded I check to see if the user should be logged in automatically by checking the localStorage variable. If they are automatically logged in then my app works perfectly. If they aren't I show them the "login" card, which is basically a login form. Once they submit this log in form I perform an ajax call. If this comes back correctly I send them to the "dashboard" card. But before that I am trying to load the customer list via an ajax call using:
var tmpId = { id: example.id }; var cListStore = Ext.create('example.store.CustomerList'); cListStore.getProxy().setExtraParams(tmpid); cListStore.load();
With the code above I can see that my proxy call is happening, and I can see the response is correct. However, when I see the dashboard, and I click on the Customers icon I see an empty list. My toolbar is there and even the indexBar on my list is there, just no data. I'm not sure what I'm doing wrong here. I am including my list view, store, and model below, hopefully that will help anyone who looks at this:
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'] } });
I have also tried to put a storeId in the Customer List store and then use the following code instead of calling Ext.create():
Ext.StoreManager.get('storeid').load()
This produced the same results. I could see the proxy was fetching the data correctly but it still was rendering in my list component.