Loading nested xml into tree store and displaying in a nestedlist view

[shanem]

I'm working with a legacy system that I can't change which returns a complicated xml file which I want to load into a tree store and display in a nested list. Below is a very simplified version of the xml file

<?xml version="1.0" encoding="UTF-8"?>
<users>
    <group>
        <title>Group 1<title>
        <user>
            <id>1</id>
            <name>Ed Spencer</name>
            <email>ed@sencha.com</email>
        </user>
        <user>
            <id>2</id>
            <name>Abe Elias</name>
            <email>abe@sencha.com</email>
        </user>
    </group>
    <group>
        <title>Group 2<title>
        <user>
            <id>3</id>
            <name>Joe Blogs</name>
            <email>joe@sencha.com</email>
        </user>
        <user>
            <id>4</id>
            <name>Bob Doe</name>
            <email>bob@sencha.com</email>
        </user>
    </group>
</users>

What I want to get out is a nested list which a level 1 show the groups, and level two show the users in that group (in reality there could be multiple levels of groups but for now I'll be ignoring that).

I have found a large number of pages via google but none seem to show a working example and if they do its using json which I can't use.

I'm wondering do I need to over ride/extend the xmlreader or configure it some how?

Any help at all would be much appreciated.

[mitchellsimoens]

The <user> really needs to be within <users> so you could setup the default root property to users. You can try to override the readRecords in the reader to do this or getResponseData to get it at the first.

[shanem]

Ok well I can't control the from of the xml as it from a legacy system. I've been trying to get this to work for a while now with actual data here are the bits of code. The main thing is there may be many level with which contain a mix or none of folder and procedures.

XML

<?xml version="1.0" encoding="UTF-8" ?>
<TOC_Data>
	<FolderInfo>
		<Sequence>1</Sequence>
		<Description><=!=[=C=D=A=T=A=[3D PAT Sample Procedures]=]=></Description>


		<ProcedureInfo>
			<Metadata>302</Metadata>
			<OdfId>E_IFM_1605</OdfId>
			<Number>1.605</Number>
			<Title><=!=[=C=D=A=T=A=[COLUMBUS WATER ON OFF VALVE (WOOV) 6, INSPECTION, CLEANING, DISINFECTING AND ENCAPSULATING]=]=></Title>
			<ProcType>1</ProcType>
			<FileExtension>xml</FileExtension>
		</ProcedureInfo>
	</FolderInfo>
	
	<FolderInfo>
		<Sequence>5</Sequence>
		<Description><=!=[=C=D=A=T=A=[Styles]=]=></Description>


		<FolderInfo>
			<Sequence>6</Sequence>
			<Description><=!=[=C=D=A=T=A=[Checklist]=]=></Description>


			<ProcedureInfo>
				<Metadata>85</Metadata>
				<OdfId>M_T_100top</OdfId>
				<Number>1.100</Number>
				<Title><=!=[=C=D=A=T=A=[CLP Top of Procedure]=]=></Title>
				<ProcType>1</ProcType>
				<FileExtension>xml</FileExtension>
			</ProcedureInfo>


			<ProcedureInfo>
				<Metadata>119</Metadata>
				<OdfId>M_T_101steps</OdfId>
				<Number>1.101</Number>
				<Title><=!=[=C=D=A=T=A=[CLP Steps]=]=></Title>
				<ProcType>1</ProcType>
				<FileExtension>xml</FileExtension>
			</ProcedureInfo>
		</FolderInfo>
	</FolderInfo>
</TOC_Data>

View

Ext.define('deeploading.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    requires: [
        'Ext.TitleBar',
        'Ext.Video'
    ],
    config: {
        tabBarPosition: 'bottom',


        items: [
            {   
                title: 'Get Started',
                iconCls: 'user',
                xtype: 'nestedlist',
                store: 'TOCstore',
                displayField: 'Description',
            }
        ]
    }
});

Ext.define('deeploading.model.iPVToc', {    extend: 'Ext.data.Model',
    config: {
        fields: [
            { name: 'Sequence', type: 'auto' },
            { name: 'Description', type: 'auto'}
        ],


        //hasMany: { model: 'Folders', name: 'folders' },
        hasMany: { model: 'Procedures', name: 'procedures'},




    }
});

Ext.define('deeploading.model.Folders', {    extend: 'Ext.data.Model',
    config: {
        fields: [


            { name: 'Sequence', type: 'auto' },
            { name: 'Description', type: 'auto'}
        ],
        
        hasMany: { model: 'Procedures', name: 'procedures'},
        belongsTo: 'iPVToc'
    }
});

Ext.define('deeploading.model.Procedures', {    extend: 'Ext.data.Model',
    config: {
        fields: [


            { name: 'Metadata', type: 'auto' },
            { name: 'OdfId', type: 'auto' },
            { name: 'Number', type: 'auto' },
            { name: 'Title', type: 'auto'},
            { name: 'ProcType', type: 'auto' },
            { name: 'FileExtension', type: 'auto' }


        ],


        belongsTo: 'iPVToc'
    }
});

Ext.define('deeploading.store.TOCstore', {    extend: 'Ext.data.TreeStore',
    model: 'deeploading.model.iPVToc',


    proxy: {
        type: 'ajax',
        url : 'ipvtoc.xml',
        reader: {
            type: 'xml',
            rootProperty: 'TOC_Data',
            record: 'FolderInfo'
        }
    },
    


    autoLoad: true
});

This displays a list of all the folders at any level and that's about it.