1. #1
    Sencha User
    Join Date
    Oct 2012
    Location
    Canada
    Posts
    14
    Answers
    1
    Vote Rating
    0
    samiswt is on a distinguished road

      0  

    Default Answered: Store value is empty after this.store.load()

    Answered: Store value is empty after this.store.load()


    Hi, everybody!

    Would you please take a look my attachment file?

    In the init function, I'd like to get modulesName after load JSON file. The problem is that I'm only able to get the value inside the load function, modulesName is empty outside of the load. Why?

    Any comment would be appreciated.

    Sam
    Attached Files

  2. Thank you, skirtle!

    I set async:false in my store definition, nothing changed. How am I able to know the load is done?
    I created a new store in constructor() and put load in init(), or even put it in another js file, it's the same thing. I checked my firebug, it seemed no matter where I put the load I'm unable to get value after load, like another guy said in stackoverflow.com, the only way I'm able to get value is that I have to finish my task inside load.

    Thank you, glopes!

    There's no difference with scope:me behind load.

    The reason why I have to get value after load is that I'd like to create Windows-like start menu bar dynamically, which means I wanna have menu bar name and configure menu bar name while creating a new instance of menu bar, and then get each sub-window configuration from my store.

    After that, when user clicks the very last menu bar which should not have any sub menu bar, a new instance of sub-window has been created.

    At current ExtJS4 example of Desktop App, I should have to create as many js files as the menu bars I would have. If this load script is possible I should have another way to create menu bar in only two js file( one for menu bar, another for sub-window).

    There's a new feature in ExtJS4 which is Object-Oriented like programming feature. And it's really cool! You're able to define anything which is declared by ExtJS by using Ext.define, and inside this definition, you're able to define any function you'd like and import any other entities by using ' new Your.Entity.Name()'. It's really a big big step in script programming language's domain.

  3. #2
    Sencha User
    Join Date
    Nov 2013
    Posts
    3
    Vote Rating
    0
    vallesquino is on a distinguished road

      0  

    Default


    Hi Sam,

    You should also need to pass the scope into the load parameters (http://docs.sencha.com/extjs/4.2.1/#...tion-cfg-scope)
    ...
    me.store.load({
    callback: function(){
    me.store.data.each(function(records) {
    me.modulesName[i] = records.raw.name;


    });
    },
    scope: me
    }});

    ...
    This way callback function is binding with "me" scope, so when the callback function is executed, the context of that function will be "me" and you can access to me.modulesName.

    Regards

  4. #3
    Sencha User
    Join Date
    Oct 2012
    Location
    Canada
    Posts
    14
    Answers
    1
    Vote Rating
    0
    samiswt is on a distinguished road

      0  

    Default


    Thank you very much, vallesquino!

    I've tried and the same thing happens. I think it means the scope: me is default.


    Any way, thanks a lot.

    Regards,


    Sam

  5. #4
    Sencha User
    Join Date
    Oct 2012
    Location
    Canada
    Posts
    14
    Answers
    1
    Vote Rating
    0
    samiswt is on a distinguished road

      0  

    Default


    Is it impossible to get value outside of load()?

  6. #5
    Sencha User
    Join Date
    Oct 2012
    Location
    Canada
    Posts
    14
    Answers
    1
    Vote Rating
    0
    samiswt is on a distinguished road

      0  

    Default


    Any clue would be appreciated, please.

  7. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,611
    Answers
    543
    Vote Rating
    326
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    The call to load is asynchronous. The load callback will be called after the data is loaded. You can access the data outside the callback but only after it is loaded.

  8. #7
    Sencha Premium Member glopes's Avatar
    Join Date
    Jan 2013
    Location
    Chicago
    Posts
    107
    Answers
    14
    Vote Rating
    26
    glopes will become famous soon enough glopes will become famous soon enough

      0  

    Default


    Hi,

    Can you replace your store with the following code and see if it works?

    Code:
    me.store.load({
        scope: me,
        callback: function(){
            me.store.data.each(function(records) { 
                if(records.raw.hasLeaf === true){
                    me.myModulesName.push(records.raw.name);
                    console.log('this is constructor App.js  inside storeload  '+ me.myModulesName[me.myModulesName.length -1]);
                }
            });
        }
    });

  9. #8
    Sencha User
    Join Date
    Oct 2012
    Location
    Canada
    Posts
    14
    Answers
    1
    Vote Rating
    0
    samiswt is on a distinguished road

      0  

    Default


    Thank you, skirtle!

    I set async:false in my store definition, nothing changed. How am I able to know the load is done?
    I created a new store in constructor() and put load in init(), or even put it in another js file, it's the same thing. I checked my firebug, it seemed no matter where I put the load I'm unable to get value after load, like another guy said in stackoverflow.com, the only way I'm able to get value is that I have to finish my task inside load.

    Thank you, glopes!

    There's no difference with scope:me behind load.

    The reason why I have to get value after load is that I'd like to create Windows-like start menu bar dynamically, which means I wanna have menu bar name and configure menu bar name while creating a new instance of menu bar, and then get each sub-window configuration from my store.

    After that, when user clicks the very last menu bar which should not have any sub menu bar, a new instance of sub-window has been created.

    At current ExtJS4 example of Desktop App, I should have to create as many js files as the menu bars I would have. If this load script is possible I should have another way to create menu bar in only two js file( one for menu bar, another for sub-window).

    There's a new feature in ExtJS4 which is Object-Oriented like programming feature. And it's really cool! You're able to define anything which is declared by ExtJS by using Ext.define, and inside this definition, you're able to define any function you'd like and import any other entities by using ' new Your.Entity.Name()'. It's really a big big step in script programming language's domain.

  10. #9
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,611
    Answers
    543
    Vote Rating
    326
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Quote Originally Posted by samiswt View Post
    I set async:false in my store definition, nothing changed.
    There's no such setting for a store.

    Quote Originally Posted by samiswt View Post
    How am I able to know the load is done?
    Either listen to the load event or pass a callback to the load method, as you are currently.

    Quote Originally Posted by samiswt View Post
    I created a new store in constructor() and put load in init(), or even put it in another js file, it's the same thing. I checked my firebug, it seemed no matter where I put the load I'm unable to get value after load, like another guy said in stackoverflow.com, the only way I'm able to get value is that I have to finish my task inside load.
    Putting code into separate files makes very little difference to how it runs. You just need to call your initialization code from inside a load listener or callback. This is standard practice when working in JS. I don't see why invoking it this way would be a problem for you.

    Quote Originally Posted by samiswt View Post
    There's no difference with scope:me behind load.
    Setting the scope determines the object referenced by the this keyword inside the callback. I don't see anywhere that this is used inside your callback function, so the scope is irrelevant. The variable me is captured in a closure and isn't affected by setting the scope.

    On a separate note...

    I suggest using store.each rather than store.data.each.

    Don't access raw like that. Configure suitable fields on your model and then get the values using the get method.

  11. #10
    Sencha User
    Join Date
    Oct 2012
    Location
    Canada
    Posts
    14
    Answers
    1
    Vote Rating
    0
    samiswt is on a distinguished road

      0  

    Default


    Thank you very very very much, skirtle! I moved init part in constructor into load(), it works fine! I should have figured it out earlier. Thank you so much! By the way, would you please show me how to use store.each instead of store.data.each which I used? I've tried many times and I'm unable to find a way to use get method.