PDA

View Full Version : Load stores before window shows



nsilva
19 Feb 2015, 9:21 AM
Hello, i have an app that requires that the store loads before the window is showed, i have tried some approaches but with no luck, I need this because when i load some default data from ajax on success i pass to comboboxes some ids and they shoud shou the valuefield as normal.

This behaviour is happening but stores will take some time to load and the default values will appear at diferent times.

Any advice on how to load all the stores before the window is presented to the user?

Thanks.

nsilva
20 Feb 2015, 2:31 AM
Can I use some event to load first stores and prevent the window renders and only after the all stores loaded then the form/window shows? Thanks

jksuf
20 Feb 2015, 2:43 AM
Hi nsilva,I am not sure I get the exact point of your problem, but if you want to to display a window only when your store is loaded you would use the callback function of the load event of your store:



var myStore = Ext.create('Ext.data.Store', {
autoLoad: false, // you will load the store manually
fields: ['name', 'age', 'whatever', ...],
proxy:
type: 'ajax',
url: 'yoururl',
reader: {
type: 'json',
rootProperty: 'rootproperty',
}
});

// load your store
myStore.load(function (records, operation, success) {
if (success) {
// check your records here
// display you window
}
});

nsilva
20 Feb 2015, 2:55 AM
Thanks jksuf for the reply, it's something like that that i need, but i have a window with some combo and each combo has it's own store, how can i mage that in a similiar code? Thanks

jksuf
20 Feb 2015, 5:10 AM
I'm sorry nsliva I didn't understand well ^^ ! You want to create the window once every store have been loaded OR you want to set the combo stores when you're first store is loaded, just before displaying the window ?

nsilva
20 Feb 2015, 5:49 AM
Let me try to explain it: I have a window with several comboboxs and each combo has a store to load, at the moment the stores are autoload true but this is ok when there are no data to display(1 time), but when i have data to display the defaults i sent to the combo thru setValue() some id's so they can shou the display field correctly but as the store are async because of ajax this has some delay an this is what i am trying to prevent. Thanks

jksuf
20 Feb 2015, 6:28 AM
If you want to wait for all your combo stores before displaying the window containing the combos, you can do something like this:



var store1 = Ext.create('Ext.data.Store', {
fields: [...], storeId: 'store1',
...,
autoLoad: {
callback: 'displayWindow'
}
});

var store1 = Ext.create('Ext.data.Store', {
fields: [...], storeId: 'store2',
...,
autoLoad: {
callback: 'displayWindow'
}
});

var storesIdIndexes = ['store1', 'store2'];

displayWindow: function() {
var allStoresLoaded = true;

// check if all combo stores have been loaded
Ext.each(myComboStores, function(storeId) {
var store = Ext.getStore(storeId);
allStoresLoaded &= store.isLoading();
});

// if all combo stores have been loaded, display your window
if (loaded) {
// display the window
}
}

nsilva
20 Feb 2015, 6:50 AM
Thanks for the reply, i will try it asap. Thanks.

nsilva
27 Feb 2015, 8:55 AM
This is my solution based on the code that was posted above, this is working.



var combo = Ext.ComponentQuery.query('combobox'), //check how many combos there are in the app
comboCount = len = combo.length, // check the length
i;

component.setLoading(true);

for(i = 0; i < len; i++) {
combo[i].getStore().load({ //iterate throught the store to load
scope: this,
callback: function(records, operation, success) {
comboCount--; // 8, 7, 6, until 0
if(!comboCount) { //if zero then all stores loaded
this.loadDefaults();// load the default values
component.setLoading(false);
}
}
});
}

yeghikyan
27 Feb 2015, 9:54 AM
i have an app that requires that the store loads before the window is showed
I think it is bad idea, just imagine, your stores for this or that reasons loads 10 seconds, then your popup window will appear in 10 second.

It is better to show the window, trigger the load of stores (auto or not), set the mask (yourWindow.setLoading("Loading...")) and when all the required stores are loaded, remove the mask (yourWindow.setLoading(false)).
:D

nsilva
27 Feb 2015, 10:11 AM
Tha's exactly what I'm doing :-), this method that I'm using is used afterrender of the window, and then it shows the setloading and when all stores loaded unmasks and shows the result. :-).