How to Parse Nested XML using Sencha Touch 2 - Part2

This Post is the continuation of where we left in Part1, If you haven't read, Please read first and continue reading this Post.

Define a Store

Now, Let's define a Store with Class name 'IssueStores' and storeId configuration as 'issuestores'. This Store will load the 'data.Issue.xml' file (defined in part1) configured in url config using Ajax Proxy config. This Ajax Proxy configuration also contains reader config which will read Nested XML using the rootProperty and record property configuration.

Ext.define('MyApp.store.IssueStores', {

    extend: 'Ext.data.Store',
    alias: 'store.issuestores',

    requires: [
        'MyApp.model.Issue'
    ],

    config: {
        autoLoad: true,
        model: 'MyApp.model.Issue',
        storeId: 'issuestores',
        proxy: {
            type: 'ajax',
            url: 'data/Issue.xml',
            reader: {
                type: 'xml',
                rootProperty: 'Issue',
                record: 'Issue'
            }
        }
    }
});

Parse the Nested XML

Now, let's see the main application logic, read the nested XML using above registered store ('issuestores') and display the articles headlines with sections as console log output.

Ext.application({
    models: [
        'Issue',
        'Article',
        'Section1'
    ],
    stores: [
        'IssueStores'
    ],
    name: 'MyApp',

    launch: function() {
        var issueStores = Ext.getStore('issuestores');
        issueStores.load(function(records, options, success){

            //console.log(records);
            if(success){
                Ext.each(records,function(record){
                    console.log('Issue Name: '+record.data.Name);
                    var sections = record.section();

                    if(sections.data.length > 0){
                        //console.log(sections.data.items);
                        Ext.each(sections.data.items,function(section){

                            console.log('Section: '+section.data.SectionName);
                            var articles = section.articles();
                            if(articles.data.length > 0){

                                Ext.each(articles.data.items,function(article){
                                    console.log('Article ID: '+article.data.ArticleId+ ' Article HeadLine: '+article.data.ArticleHeadline);
                                });
                            }
                        });
                    }
 
                });
            }
        });
    }

Explanation:

First, Let's access the registered store using getStore() function with 'StoreId' property. Store load() callback function is triggered for every issue record in the store. Using 'name' Property in hasMany Association  defined on Issue Model Class (Part1 of this Post) as a function section(), we are going to access array of section records associated for this Issue.

Then, using Ext.each() we are going to loop each section records and trying to access array of article records associated for each section record using 'name' Property in hasMany Association  defined in Section Model Class (Part1 of this Post) as a function articles() and display the record details in browser console using console.log().

When i run this code in Google Chrome, Following is the console log output

Hope, you enjoyed this Post.