Ext.getCmp() is undefined

I'am trying to load the data of my model into the form. It works when you hit the button "Load Model" with the following handler;

                handler: function() {
                    var settingsForm    = Ext.getCmp('settingsForm');
                    settingsForm.loadRecord(settingsStorage.getAt(0));
                }

what I'am trying to accomplish is that the model loads directly without using the button.

loadSettingsData: function() {

    var settingsForm    = Ext.getCmp('settingsForm');
    alert(settingsForm);
    settingsForm.loadRecord(settingsStorage.getAt(0));

the alert is giving me

"undefined"

When I use "this.loadRecord(settingsStorage.getAt(0));" I get

"Uncaught TypeError: Object [object Object] has no method 'each'" in firebug.

what am I doing wrong?

all the code:

     // the sructure for every row in the file
 var UserSettings = Ext.regModel('UserSettings', {
     fields: ['push', 'shake', 'sound']
 });

 // the storage 
var settingsStorage = new Ext.data.Store({
     proxy: new Ext.data.LocalStorageProxy({
  type: 'localstorage',
         id: 'data',
         //very important for the row update - basicaly, the row number is taken from the id field in the userSettings structure
        proxy: {
             idProperty: 'id',
             type: 'localstorage'
         }
     }),
     //uses the userSettings structure
     model: 'UserSettings',
     autoLoad: true,
     autoSave: true
 });

 //sync with local file
 settingsStorage.sync();
 //what to do when file is read, right now the only thing important to us us the scope
 settingsStorage.read({
     scope: this,
     callback: function (records) {
         //code to load the first record
     }
});

and

app.views.Settings = Ext.extend(Ext.form.FormPanel, {
title: "Instellingen",
iconCls: "settings",
id: "settingsForm",
standardSubmit : false,
items: [{
        xtype: 'fieldset',
        title: 'Instellingen push berichten',
        id: 'lol',
        items: [
            {
                xtype: 'togglefield',
                name: 'push',
                label: 'Aan/uit',
     开发者_如何学JAVA           value : 1
            },
            {
                xtype: 'togglefield',
                name: 'shake',
                label: 'Trillen',
                value : 1
            },
            {
                xtype: 'togglefield',
                name: 'sound',
                label: 'Geluid',
                value : 1
            }       
        ]
    }
],
dockedItems: [
    {
        xtype: 'toolbar',
        dock: 'bottom',
        items: [
            {
                text: 'Load Model',
                ui: 'round',
                handler: function() {
                    var settingsForm    = Ext.getCmp('settingsForm');
                    settingsForm.loadRecord(settingsStorage.getAt(0));
                }
            },
            {xtype: 'spacer'},
            {
                text: 'Reset',
                handler: function() {
                    var settingsForm    = Ext.getCmp('settingsForm');
                    settingsForm.reset();
                    alert(settingsForm.id);
                }
            },
            {
                text: 'Save',
                ui: 'confirm',
                handler: function() {
                    var settingsForm    = Ext.getCmp('settingsForm');
                    settingsForm.customSubmit(settingsForm.getValues());
                }
            }
        ]
    }
],
initComponent: function() {

    this.loadSettingsData();

    // reload the component
    app.views.Settings.superclass.initComponent.apply(this, arguments);

},
loadSettingsData: function() {

    var settingsForm    = Ext.getCmp('settingsForm');
    alert(settingsForm);
    settingsForm.loadRecord(settingsStorage.getAt(0));

    if(settingsStorage.getAt(0)) {
        //this.loadRecord(settingsStorage.getAt(0));
    }

},
customSubmit: function(data) {

    //read data
    settingsStorage.read();

    //get the first item
    var item = settingsStorage.getAt(0);

    //if not exists, build the first item (this area needs to be replaced with a function that construct a whole settings file
    if (!item) {

        alert('create new item');

        //constract item's structure
        var item = new UserSettings({
            push: data.push, shake: data.shake, sound: data.sound
        });

        //add new item to file
        settingsStorage.add(item);

        //sync item
        settingsStorage.sync();

    }

    //set value in item
    item.set('push', data.push);
    item.set('shake', data.shake);
    item.set('sound', data.sound);

    //sync items to file
    settingsStorage.sync();
  },
 });
  //set the variable
Ext.reg('settings', app.views.Settings);
edit// viewport:

Ext.apply(app.views, {
        contact: new app.views.Contact(),
        viewItem: new app.views.ViewItem(),
        settings: new app.views.Settings(),
        rsslist: new app.views.RssList()
    });
    Ext.apply(this, {
        tabBar: {
                dock: 'bottom',
                layout: {
                    pack: 'center'
                },  
        },
        items: [
            app.views.rsslist,  
            app.views.settings,
            app.views.contact
        ]
    });

Just a guess without viewing all of your code: the objects may not be initialized the time you try to access/assign them.

Does it make a difference if you call this.loadSettingsData(); after you call initComponent?