1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    28
    Answers
    2
    Vote Rating
    0
    alexgrimaldi is on a distinguished road

      0  

    Default Unanswered: Store seems to load as last thing in my component

    Unanswered: Store seems to load as last thing in my component


    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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,649
    Answers
    3454
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    In the getter that builds the options list from the store, you should check if it is loading. If it is then set a load listener. If it isn't then proceed.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    28
    Answers
    2
    Vote Rating
    0
    alexgrimaldi is on a distinguished road

      0  

    Default


    It does load. I am not too sure about the listener. The data would be loaded at the end anyway. Is there a way to trigger the store to load the data? Thanks

Thread Participants: 1

Tags for this Thread