Using Ext.data.Store to pre-populate a simple Ext.FormPanel

Question

Hi ExtJS developers. I am new to ExtJS and am trying to pre-populate a basic form with data read from an external XML resource. I can not seem to get the data pre-loaded, following is the code:

Ext.onReady(function(){

    // getting the UUID from what is passed on by REST Controller
    var myuuid = location.pathname;
    var myurl = myuuid.replace('/edit/director','');

    // read data from url and store
    var store = new Ext.data.Store({
        // load using HTTP, point this to the xml you want to test
        url: myurl,

        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
        // records will have a "stats tag
        record: 'stats',
        id: 'serial-number',
        }, [
               // set up the fields mapping into the xml doc
               {name: 'director', mapping: 'director'},
               'director-phone', 'director-phone-ext', 'director-email', 'website','title','published-name'
           ])
    });

    // create a form
    var simple = new Ext.FormPanel({
        labelWidth: 75, // label settings here cascade unless overridden
        store: store,
    renderTo: 'example-form',
    url:'save-form.php',
        frame:true,
        title: 'Edit Director Form',
        bodyStyle:'padding:5px 5px 0',
        width: 350,
        defaults: {width: 230},
        defaultType: 'textfield',

        items: [{
                fieldLabel: 'Director',
                name: 'director',
        displayField: 'director',
        valueField: 'director',
            },{
                fieldLabel: 'Telephone',
                name: 'director-phone',
        dataIndex: 'director-phone'
            },{
                fieldLabel: 'Extension',
                name: 'director-phone-ext',
        dataIndex: 'director-phone-ext'
            }, {
                fieldLabel: 'Email',
                name: 'director-email',
                vtype:'email'
            }
        ],

        buttons: [{
            text: 'Save'
        },{
            text: 'Cancel'
        }]
    });

    store.load();
    simple.render();
});

I have tested the Ext.data.store separately to see if the variable myurl is actually getting the correct XML resource path, and it is. Still this code will not 'load' the read XML.

What am I doing wrong? I fail to understand how the basic form object gets the data from the XML store object.

With thanks in advance.