1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    5
    Answers
    1
    Vote Rating
    0
    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.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,118
    Answers
    3504
    Vote Rating
    855
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Two things you should do... first I would look at the store and make sure it has data in it after it has loaded. If not then most likely your reader isn't setup properly. Other thing you can do is inspect the DOM to see if your list is creating the rows correctly, if they are blank then your fields don't match the {} in your template. You use fit layout on the container surrounding your list which is good but is the container under any or is it a direct child of the container using card layout?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

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

      0  

    Default


    I just did a console.log on the store after my .load() and I have verified that all the data is there. Next I inspected the DOM like you said. The div that holds the list data was empty. The line below was copied and pasted directly from the inspector and it didn't have an expand link (+) next to it so there's nothing in it.

    Code:
    <div id="ext-component-4" class="x-list"></div>
    And to answer your last question it is a direct child of the container using the card layout. Can you think of any other debugging steps I can take? Thanks in advance.

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

      0  

    Default


    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