View Full Version : Load all store first before showing View

25 Sep 2013, 12:02 AM
Hi Guys,

I need your help, my scenario is that I have a

Translation Store - which contains all the text translations from a services and I want to use this translations data when creating a view or container like translated Toolbar title

But my problem is that every time i use the store it is not loaded yet and I have to have a callback in the Translations.load().

I don't know where to add the Store and load it synchronously.

One scenario is like this , I added the load in initialize but it will load the store if i had another view to use that store:

initialize: function() {
var me = this; this.callParent(arguments), oStore = Ext.getStore('Translation'); if(Translation.isLoaded()){ console.log('loaded'); }else{ console.log('Not loaded'); Translation.load(function(){ me.addItems(Translation); }); }


25 Sep 2013, 2:00 AM
I am not using a store for this, but the main mechanism might work for you too:
Before I show the first view, I run an initialization routine, which waits until the translation is loaded. Then either
- each view has an initialize fn which adds the text to the components
- the controller creating the view adds the translation after adding the view (you wont see it)

That way the user can switch language on the fly, without reloading the app.

25 Sep 2013, 4:33 AM
I wonder why not use a store on this?

By the way I'm using Drupal as a web services and what do you mean create a initialization routine?

25 Sep 2013, 6:01 AM
Inside app.js -> launch I only call a util class, which is way more complex than this, but it shows what I am doing:

Ext.define('App.util.initialize.Initialize', {
singleton: true,

index: function () {
* test if
* - app is already installed
* - never was installed before (setup everything for the first time run)
* - load all Models / Stores / Translations
* - wait until all is loaded

I am not using stores for the translation, as I do have different files , each containing a single language. These files contain statics and I have a language util class, reading the values as needed. Is about the same as using Stores (autoloading JSON files) I guess.

25 Sep 2013, 12:38 PM
But the problem in Sencha is how can you wait an Ajax call?

My current approach is by using Ext.Ajax + async equals to false then it will wait for the translation to be loaded then I'll just store the results into a particular store

25 Sep 2013, 1:43 PM
I guess you are loading local JSON files and not from the server.
So the time until these files are loaded should be way below 250ms.

You can
- get the success fn from the ajax call being the start fn. This won't start until you have the result.
- have a listener on the load event of the store, simply have autoload activated.
- if you have several ajax calls fill a variable and do Ext.defers until var reaches a certain number.

There is not a lot of information on what exactly you are doing.

25 Sep 2013, 3:43 PM
Btw I already got it working

var me = this;
if (store == null) {
store = 'Translations';
if (timedelay == null) {
timedelay = 100;
var _load = function(callback){
if(Ext.getStore('Translations').isLoaded() === false){
Ext.Function.defer(function (arg) {
}, timedelay);




I think having an Asynchronous display and view by Sencha Touch is really a great feat it makes my app faster unlike having an Ext.Ajax with async config to false.

26 Sep 2013, 2:00 AM
50ms should do, but otherwise its exactly what I meant :)

26 Sep 2013, 4:38 AM
By the way.. I'm thinking so much on this issue..

And it seems the most simplest answer is put your components in the "show" event :) Damn!

26 Sep 2013, 5:55 AM
So - you want to load the translation after you show your components?
I guess I misunderstood you, because you where talking about translation and hence I thought, this should be loaded first :((

26 Sep 2013, 7:56 PM
But your really a big help...

Btw I used Ext.ux.Deferred much better if this is included in the Core