ExtJS 5, синхронная загрузка ресурсов
 

В моем приложении тексты выводятся в зависимости от языка пользователя, а на сервере хранятся в БД и изредка меняются. Поэтому я не могу просто прописать их в js файлах. Как выход, я создал синглтон который запрашивает тексты с сервера при создании.

Ext.define("Communication.config.LocalText",{
	singleton : true,
	constructor : function(config){
		console.log("constructor : Communication.config.LocalText");
		this.store = Ext.create("Ext.data.Store", {
			model: "Communication.model.LocalText",
			proxy: {
			type: "ajax",
				url : "/json?cmd=communication.translations",
				pageParam: "",
				startParam: "",
				limitParam: ""
			}
		});
		this.store.load();
	}
});

Предполагалось что я буду подключать его к тем вьюхам где нужны тексты, таким вот образом:

Ext.define("Communication.view.TabMenu", {
	extend: "Ext.tab.Panel",
	alias: "widget.tabmenu",
	requires: [
		"Communication.config.LocalText"
	],
	initComponent: function() {
		Ext.apply(this, {
			items: [
				{
					title: Communication.config.LocalText.getText("heading", "history")
				}
			]
		});
		this.callParent(arguments);
	}
});

Но возникла проблема: загрузка то асинхронная. Так что, когда я обращаюсь к этому синглтону и вызываю getText(), часто бывает что текстов еще нет. Я пытался сделать цикл после load для ожидания, но тут уже браузер возмущается что скрипт не отвечает. Подскажите пожалуйста, как бы вы решили эту проблему?

Генерим на сервере такой класс например:

Ext.define("MyApp.Locale", {
    singleton : true,
    
    get : function (id) { return this.phrases[id]; },

    phrases : {
        'yes' : 'Да',
        'no' : 'Нет',
        ...
    }
});

То есть вместо статического MyApp.Locale.js на сервере выполняется скрипт который наполняет его действующими локалями.
На PHP например как-то так:

Ext.define("MyApp.Locale", {
    singleton : true,

    get : function (id) { return this.phrases[id]; },
    
    phrases : <? json_encode($active_locale_translations) ?>
});

Да, такая мысль была. Но проблема в том, что у меня ВСЕ генерируемые сервером файлы доступны по такому вот урлу: "/controller?cmd=...". А экст ищет свои ресурсы по другим путям. В частности, этот файл локали будет искаться по пути MyApp/app/Locale.js. Вот если бы можно было для отдельного файла заменить путь... Или можно?

В общем, проблему решил определив этот источник текстов в index.htm, благо он как раз на сервере генерится. Костыль конечно, но пока пусть поработает, может потом лучше придумаю.

на сервере можно урлы красивые рисовать средствами вебсервера ..mode_rewrite например для апача

Можно, но править конфиги апача клиент не разрешает. Только в том случае если это нужно 100%. Видимо будем жить с костылем. И кстати... в процессе разработки приложения на ExtJS5 все файлы лежат по своим папкам и запрашиваются каждый раз заново. Но при деплойменте они все пакуются в один, который будет кешироваться браузером. Так что мод реврайт отпадает.

Можно продолжать юзать динамическую загрузку ..встречал проекты где так делают и в продакшене. Хотя чаще собирают в один файл.

Ну ок ..если это один файл, можно делать так:

<script src="MyApp/Locale.js"></script>

..или так:

Ext.Loader.loadScript({
    url     : 'MyApp/Locale.js',
    onLoad  : function() {
        ...
    }
});

Собирать будем 100%. Ну а ресурсы инициализирую в индексе, он то генерится на сервере. Пусть уж так...

Я делаю вот так:

var loadMask;

	var verifyStoreLoads = function(){
		var ret = true;		
		var filStore = controller.getFilialsStore();
		ret = ret&&filStore.isLoadedSuccessful;
		var divStore = controller.getDivisionsStore();
		ret = ret&&divStore.isLoadedSuccessful;
		return ret;
	}
	
	var preRun = function(){	
		if (!loadMask){
			loadMask = new Ext.LoadMask(globaldatapanel, {msg:'Загрузка справочников...'});
			loadMask.show();
		}
		var ret = verifyStoreLoads();
		if (ret){
			loadMask.hide()
			loadMask.destroy();
			run();
		}
		else
			setTimeout(preRun,1000);		
	}

ну а в сторе вешаю слушатель

isLoaded:false,
        isLoadedSuccessful:false,
        listeners:{
		load: function(store, records, successful, eOpts){
			store.isLoaded = true;
			store.isLoadedSuccessful = successful;
		}
	},

В итоге, пока сторы не загружены, висит сообщение "Загрузка справочников..."