How to Parse Nested XML using Sencha Touch 2 - Part1

Sencha Touch 2 supports Parsing Nested XML using associations (hasMany, belongsTo). XML is used to exchange data between client Browser and Server.  Today, we will take the below Nested XML as our reference as parse it using Sencha Touch 2. Save the below XML content in file as 'Issue.xml' under data folder inside Project root folder.


Define the Nested XML

<?xml version="1.0" encoding="UTF-8" ?>
<Issue>
  <IssueId>1</IssueId>
  <Name>2013-02-11</Name>
  <PublicationDate>2013-02-11</PublicationDate>
  <Sections>
    <Section>
    <SectionId>1</SectionId>
    <SectionName>News</SectionName>
    <Articles>
      <Article>
        <ArticleId>1</ArticleId>
        <ArticleHeadLine>Article Headline1</ArticleHeadLine>
      </Article>
      <Article>
        <ArticleId>2</ArticleId>
        <ArticleHeadLine>Article Headline2</ArticleHeadLine>
      </Article>
    </Articles>
    </Section>
    <Section>
    <SectionId>2</SectionId>
    <SectionName>Blog</SectionName>
    <Articles>
      <Article>
        <ArticleId>5</ArticleId>
        <ArticleHeadLine>Article Headline5</ArticleHeadLine>
      </Article>
      <Article>
        <ArticleId>6</ArticleId>
        <ArticleHeadLine>Article Headline6</ArticleHeadLine>
      </Article>
    </Articles>
    </Section>
  </Sections>
</Issue>

The element 'Issue' is the root element, the Issue element contains one or more Sections represented by 'Sections' Element. Each Section element contains one or more articles represented by 'Articles' Element.

Define Model Classes

First, Let's define Model Class for Issue with Name 'Issue' which extends 'Ext.data.Model' Class and add alias name as 'issue'. This Model contains fields configuration- IssueId, Name, PublicationDate (Based on above XML) and hasMany associations (one Issue can have multiple Sections) with 'Section' Model.

hasMany config property contains these below configurations

•    associationkey:  The name of the element/property in the XML data to read the association from
•    model: The full class name or reference to the model class that owns this associations. This is a required configuration on every association.
•    name: The name of the function to create on the parent model to retrieve the associated model Elements. If not specified, the pluralized name of the child model is used.

Ext.define('MyApp.model.Issue', {
    extend: 'Ext.data.Model',
    alias: 'model.issue',

    uses: [
        'MyApp.model.Section'
    ],

    config: {
        fields: [
            {
                name: 'IssueId'
            },
            {
                name: 'Name'
            },
            {
                name: 'PublicationDate'
            }
        ],
        hasMany: {
            associationKey: 'Sections',
            model: 'MyApp.model.Section',
            name: 'section'
        }
    }
  });

Now, Let's define Model Class for Section with Name 'Section' which extends 'Ext.data.Model' Class and add alias name as 'section'. This Model contains the fields configuration- SectionId, SectionName (Based on above XML) and Memory proxy configuration with XML reader as well as hasmany associations (Each Section will have one or more articles) with Article Model.

  The reader config property contains the following configuration

•   type: the type of reader (XML or JSON or JSONP)
•   rootProperty: the root XML element that contains array of elements.
•   record: The DomQuery path to the repeated element which contains record information.

Ext.define('MyApp.model.Section', {
    extend: 'Ext.data.Model',
    alias: 'model.section',

    uses: [
        'MyApp.model.Article'
    ],

    config: {
        fields: [
            {
                name: 'SectionId'
            },
            {
                name: 'SectionName'
            }
        ],
        proxy: {
            type: 'memory',
            reader: {
                type: 'xml',
                rootProperty: 'Sections',
                record: 'Section'
            }
        },
        hasMany: {
            associationKey: 'Articles',
            model: 'MyApp.model.Article',
            name: 'articles'
        }
    }
});

Finally, Let's define Model Class for Article with Name 'Article' which extends 'Ext.data.Model' Class and add alias name as 'article'. This Model contains the fields configuration- ArticleId, ArticleHeadLine (Based on above XML) and memory proxy configuration with XML reader.

Ext.define('MyApp.model.Article', {
    extend: 'Ext.data.Model',
    alias: 'model.article',

    config: {
        fields: [
            {
               name: 'ArticleId'
            },
            {
                name: 'ArticleHeadLine'
            }
        ],
        proxy: {
            type: 'memory',
            reader: {
                type: 'xml',
                rootProperty: 'Articles',
                record: 'Article'
            }
        }
    }
});

That's it, we came to an end on Part 1 of this Post. For continue reading, please click on Part2 of this Post.