Extjs load xmlfile attributes into store

Question

i am trying to load attribute values into an extjs store with the following code:

       Ext.define('assert', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'id', mapping: '@id' },
            { name: 'test', mapping: '@test' },
            { name: 'name', mapping: '@name' }
        ]
    });

    var store = new Ext.data.Store({
        model: 'assert',
        proxy: {
            type: 'ajax',
            url : 'App/data/rules.xml',
            reader: {
                type: 'xml',
                model:'assert',
                record: 'assert'
            }
        }
    });

but the store always shows up empty. Heres a blanked out excerpt from the xml file:

<?xml version="1.0" encoding="UTF-8"?>
<schema xmlns="****" xmlns:axsl="****" xmlns:sch="*****" xmlns:iso="******"     xmlns:xs="*****" xmlns:rule="******">
   <title>test Schematron</title>
   <pattern name="test Schematron">
       <rule context="*****" name="*****">
           <assert test="*****" diagnostics="*****" name="*****" id="****" comment=""     uval="" source="****"/>
           <assert test="******" diagnostics="****" name="****" id="***" comment="" uval="" source="*****"/>
      </rule>
   </pattern>
</schema>

Im very new to reading XML files to ExtJS, so it would be great if one of you could show me the proper way to map those attributes.

Answer 1

There's nothing wrong with your XML file. Your problem is that ExtJS stores don't Load data on automatically on creation by default. You have to either enable the autoLoad or load the Store manually with the load function:

Ext.define('assert', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', mapping: '@id' },
        { name: 'test', mapping: '@test' },
        { name: 'name', mapping: '@name' }
    ]
});

var store = new Ext.data.Store({
    model: 'assert',        
    autoLoad: true,         // The store will start loading as soon as the framework is ready.
    listeners: {
        load: function(){   // This gets executed when your store is done loading.
            console.log('Loaded!!');
        }  
    },
    proxy: {
        type: 'ajax',
        url : 'data/rules.xml',
        reader: {
            type: 'xml',
            model:'assert',
            record: 'assert'
        }
    }
});

Ext.onReady(function(){

    console.log('Ready!!');

    store.load({   // This works too!
        scope: this,
        callback: function(records, operation, success) {
            console.log('loaded records!!');
        }
    });

});

Remember that the load is asynchronous and you have to wait until the load is done to be able to use the data!

I recommend that you check the API doc too see all that you can do with the load function.

extjsjavascript