I need to create a TitleBar which is sucked into a set of screens. The TitleBar elements are drop-down lists. The items within the drop-down lists must be dynamic and must be loaded from a data file.

My problem: the bit of code that reads the data file should be one the first instructions to be executed while, in reality, it is the last bit of code to be executed. This generates an empty item list for my drop-down(s).

This is my code. Please note that the functionality is far from being complete and the code might not make sense entirely.

The model:
Code:
Ext.define('CloudClient.model.OrganizationModel',{
    extend: 'CloudClient.model.CCL_Model',


    initialize: function() {
        this.callParent(arguments);
        console.log('OrganizationModel:initialize 0001');
    },


    config: {
        fields: [
            { name: 'test', type: 'string' }
        ],


        hasMany : 'CloudClient.model.SiteModel'
    }
});
The store:
Code:
Ext.define('CC.store.OrganizationStore', {
    extend: 'Ext.data.Store',


    config: {
        model: 'CC.model.OrganizationModel',


        proxy: {
            type: 'ajax',


            url: 'app/data/fakedata_01.json',


            reader: {
                type: 'json',
                rootProperty: 'organization'
            }
        }


    } ,


    getItems : function (node, parentValue) {
        var itemOptionList = [];


        load(function(leafs){
                Ext.each(leafs, function(leaf) {


                    itemOptionList.push({text: leaf.get("name"), value: leaf.get("id")});
                    console.info("getOptionList looping across the store 3");
                });




            }
        );


        return  itemOptionList;
    }
})
;
The toolbar:
Code:
Ext.define('CC.view.component.custom.CustomerToolbar', {
    extend: 'Ext.TitleBar',


    xtype: 'ccl-customer-toolbar',


    initialize: function() {
        this.callParent(arguments);


        var toolbarItems = this.getToolbarItems();


        this.setItems(toolbarItems);
    },


    config: {
        layout: 'hbox',


        defaults: {


        }
    },


    getToolbarItems : function () {
        var itemList = [];


        console.info("getToolbarItems before calling getOptionList 1 ");
        var optList =  this.getOptionList("organization");
        console.info('optList: ' + optList);
        console.info("getToolbarItems after calling getOptionList 5 ");


        itemList.push(
            {
                xtype: 'selectfield',
                name: 'customerOptions',
                id :'organizationId',
                options: optList,
                action :'selectOrganizationAction'
            }
        );
        console.info("getToolbarItems after populating itemList 6");




        return itemList;
    },


    getOptionList :function (node, parentValue) {
        var itemOptionList = [];


        console.info("getOptionList before looping across the store 2");


        //Important: note the fact that OrganizationStore is not called using all its name (do that and it does not load ... God knows why)
        //PROBLEM: THIS LOOP IS EXECUTED AS LAST THING IN THIS CLASS
        Ext.getStore('OrganizationStore').load(function(organizationList) {


            console.info("getOptionList inside the store load function 2.5");


            Ext.each(organizationList, function(organization) {


                itemOptionList.push({text: organization.get("name"), value: organization.get("id")});
                console.info("getOptionList looping across the store 3");
            });


        });


        console.info("getOptionList after looping across the store 4");


        console.info("itemOptionList: " + itemOptionList);


        return  itemOptionList;
    }


});

Any idea or suggestion would be very appreciated.

Thanks,
Alex