Threaded View

  1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    5
    Vote Rating
    0
    Answers
    1
    jb1785 is on a distinguished road

      0  

    Default Answered: Dynamically loading list in sencha touch 2

    Answered: Dynamically loading list in sencha touch 2


    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:


    Code:
    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:


    Code:
    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():


    Code:
    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.

  2. I figured it out, I removed these lines:

    Code:
    var cListStore = Ext.create('example.store.CustomerList');
    cListStore.getProxy().setExtraParams(tmpid);cListStore.load();
    and I added the following in its place:

    Code:
    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.

Thread Participants: 1

Tags for this Thread