Results 1 to 4 of 4

Thread: Question about loading data from a store.

  1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    8
    Vote Rating
    0
      0  

    Default Question about loading data from a store.

    Hi everyone.

    I am new to Sencha Touch and I am using Sencha Architect.

    I'm having an issue when loading data from a store.

    I have the following nested JSON store (RavenD:

    {
    "ID": 3,
    "Name": "Sarah Carlson",
    "Telephone": "(011) 123 4567",
    "Address": "1 Test ave",
    "Suburb": "Test",
    "City": "Testville",
    "Province": "Gauteng",
    "Country": "South Africa",
    "PostalCode": "0001",
    "DeliveryStatus": "Pending",
    "Packages": [
    {
    "ID": 1,
    "Name": "Package 1",
    "Status": "Pending"
    },
    {
    "ID": 2,
    "Name": "Package 2",
    "Status": "Pending"
    }
    ]
    }

    I am populating a list with the data from the store but the problem lies in what happens when you select an item.

    I need to take the "Packages" for the selected customer and populate another list on the next page with them, however, I am unable to get any of the Package details. All I get when I load the packages are objects but I cannot pull any data from them.

    Here's what I get when I do a console.log(packages):

    [
    Object

    • ID: 1
    • Name: "Package 1"
    • Status: "Pending"
    • __proto__: Object

    ,
    Object

    • ID: 2
    • Name: "Package 2"
    • Status: "Pending"
    • __proto__: Object



    Why can't I use the getAt() method to retrieve the information?

    My code is as follows.

    Shipment Model:
    Code:
    Ext.define('Deliveries.model.Shipment', {
        extend: 'Ext.data.Model',
        uses: [
            'Deliveries.model.Package'
        ],
        config: {
            fields: [
                {
                    name: 'ID',
                    type: 'int'
                },
                {
                    name: 'Name',
                    type: 'string'
                },
                {
                    name: 'Telephone',
                    type: 'string'
                },
                {
                    name: 'Address',
                    type: 'string'
                },
                {
                    name: 'Suburb',
                    type: 'string'
                },
                {
                    name: 'City',
                    type: 'string'
                },
                {
                    name: 'Province',
                    type: 'string'
                },
                {
                    name: 'Country',
                    type: 'string'
                },
                {
                    name: 'PostalCode',
                    type: 'string'
                },
                {
                    name: 'DeliveryStatus',
                    type: 'string'
                },
                {
                    name: 'Packages'
                }
            ],
            hasMany: {
                associationKey: 'Packages',
                model: 'Deliveries.model.Package'
            }
        }
    });
    Package Model:
    Code:
    Ext.define('Deliveries.model.Package', {
        extend: 'Ext.data.Model',
        uses: [
            'Deliveries.model.Shipment'
        ],
        config: {
            fields: [
                {
                    allowNull: false,
                    name: 'ID',
                    type: 'int'
                },
                {
                    name: 'Name'
                },
                {
                    name: 'Status'
                }
            ],
            belongsTo: {
                model: 'Deliveries.model.Shipment'
            }
        }
    });
    Controller:
    Code:
    Ext.define('Deliveries.controller.CustomerController', {
        extend: 'Ext.app.Controller',
        config: {
            refs: {
                dataList: '#dataList',
                mainNav: '#mainNav',
                packageList: '#packageList'
            },
    
    
            control: {
                "#dataList": {
                    itemtap: 'onListItemTap'
                }
            }
        },
    
    
        onListItemTap: function(dataview, index, target, record, e, options) {
            var me = this, info, details;
            if (record) {    
                details = Ext.create('Deliveries.view.DetailsContainer', {
                    title: record.get('Name')
                });
                info = details.child('#details');
                info.setData(record.data);
                var packages = record.get('Packages');
                var packageList = details.child('#packageList');          
                packageList.setData(packages);    
                me.getMainNav().push(details);
            }
        }
    
    
    });
    Your help is greatly appreciated!!

    Regards,
    Devon Britton.

  2. #2
    Sencha User
    Join Date
    Jul 2012
    Posts
    13
    Vote Rating
    3
      1  

    Default

    From what it looks like, 'packages' is returning a simple javascript array which has the two package model instances you want. You can access them by simply doing packages[index] instead of packages.getAt(index)

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    8
    Vote Rating
    0
      0  

    Default

    Thanks man!! You really helped me out!!!

    Any idea how I could get the list on the next page to show the name of each package though?

    I'm using the setTpl method to try and set the following template.

    <div>
    <select id="option{ID}">
    <option value="Pending">Pending</option>
    <option value="Delivered">Delivered</option>
    <option value="Damaged">Damaged</option>
    <option value="Refused">Refused</option>
    </select> {packageName}
    </div>

    Code:
    for (var i = 0; i < packages.length; i++)
        {
           var packageName = packages[i].Name;
           var tpl = '<div> <select id="option{ID}"> <option value="Pending">Pending</option> <option value="Delivered">Delivered</option> <option value="Damaged">Damaged</option> <option value="Refused">Refused</option> </select> {packageName} </div>'; 
            alert(tpl);
           packageList.setTpl(tpl);
        }
    It doesn't seem to be working though.

  4. #4
    Sencha User
    Join Date
    Jul 2012
    Posts
    13
    Vote Rating
    3
      0  

    Default

    You don't seem to be using the template correctly, you should define a tpl config option in the packageList panel. You can put a <tpl> tag in these templates which signal the template engine to do some meta-work like iterating over all the elements in an array. <tpl for="."> does just that on the root element of the data object you pass to the panel.

    Code:
    config: {
        tpl: new Ext.XTemplate(
            '<tpl for=".">',
            '<div>',
            '<select id=option{ID}>',
            '<option value="Pending">Pending</option>',
            '<option value="Delivered">Delivered</option>',
            '<option value="Damaged">Damaged</option>',
            '<option value="Refused">Refused</option>',
            '</select>',
            '{Name}',
            '</div>',
            '</tpl>',
        )
    }
    This will iterate over all the models in the packages array. You can even add conditional logic to pre-select the package status

    Code:
    '<option value="Damaged"{% if (Status == "Damaged") { %} selected="selected"{% } %}>Damaged</option>'
    Note that in the template conditional statement, you need not surround "Status" with curly braces like if you were simply outputting it in the template

    So if you set the template like so and set the data for that panel in the controller, you should see what you want.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •