PDA

View Full Version : Store value is empty after this.store.load()



samiswt
15 Jun 2014, 7:49 PM
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

vallesquino
15 Jun 2014, 10:54 PM
Hi Sam,

You should also need to pass the scope into the load parameters (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.Operation-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

samiswt
16 Jun 2014, 7:39 AM
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

samiswt
17 Jun 2014, 8:58 AM
Is it impossible to get value outside of load()?

samiswt
18 Jun 2014, 11:40 AM
Any clue would be appreciated, please.

skirtle
21 Jun 2014, 7:27 PM
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.

glopes
22 Jun 2014, 11:15 AM
Hi,

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



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]);
}
});
}
});

samiswt
23 Jun 2014, 1:24 PM
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.

skirtle
23 Jun 2014, 2:45 PM
I set async:false in my store definition, nothing changed.

There's no such setting for a store.


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.


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.


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.

samiswt
24 Jun 2014, 8:01 PM
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.

skirtle
24 Jun 2014, 10:29 PM
Something like...


me.store.each(function(record) {
if (record.get('hasLeaf')) {
me.modulesName.push(record.get('name'));
}

// call to init
});

... plus configuring name and hasLeaf as fields on your model or store.

samiswt
25 Jun 2014, 7:28 AM
Thank you skirtle! I've modified my JSON file and haven't updated my Model. Maybe that's why I'm unable to use get. I'll try it. How would you suggest if I'll use something like Struts2 to output JSON-like configuration data instead of using a physical json file?