Static Localization in MVC

[harrypottar]

I know there as been a lot of threads on localization and MVC I read and read them but can not get it to work.

I thought this would be very simple?

All I would like to do is localize the standard components, we have a pre-existing model of xml localization for our on labels custom components I ported over form Flex.

I have tried this in my index page

The app loads but the standard components (eg, date) is still english.


<link rel="stylesheet" type="text/css" href="/extjs4/resources/css/ext-all-gray.css">
<script type="text/javascript" src="/extjs4/ext.js"></script>
<link rel="stylesheet" type="text/css" href="resources/css/basketassetscss.css">
<link rel="stylesheet" type="text/css" href="resources/css/BoxSelect.css">
<script type="text/javascript" src="/extjs4/locale/ext-lang-nl.js">
<script type="text/javascript" src="app.js"></script>


If I place the ext-lang call after than app call is fails to load the app with Ext.grid is undefined.


<link rel="stylesheet" type="text/css" href="/extjs4/resources/css/ext-all-gray.css">
<script type="text/javascript" src="/extjs4/ext.js"></script>
<link rel="stylesheet" type="text/css" href="resources/css/basketassetscss.css">
<link rel="stylesheet" type="text/css" href="resources/css/BoxSelect.css">
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="/extjs4/locale/ext-lang-nl.js">


I then tried to load the lang files via ajax. in the app.js


launch: function() {
Ext.Ajax.request({
url: '/extjs4/locale/ext-lang-nl.js',
success: function (response, opts) {
eval(response.responseText);
console.log("Loaded lang:", this.url );
},
failure: function () {
console.log("Failed to load requested lang:", this.url );
},
scope: this
}),
}



This time the app loads, I do not get localized components and still get the console error Ext.grid undefined.

Please help just want to load static localization.

Thanks
Harry

[harrypottar]

After hours of playing around I managed to get it to work but would like some ones opinion if there is a better more efficient way t do it.

In my index files I was originally calling


<script type="text/javascript" src="/extjs4/ext-debug.js"></script>
<link rel="stylesheet" type="text/css" href="resources/css/basketassetscss.css">
<link rel="stylesheet" type="text/css" href="resources/css/BoxSelect.css">
<script type="text/javascript" src="/extjs4/locale/ext-lang-nl.js"></script>
<script type="text/javascript" src="app.js"></script>


But I would get errors about undefined components as the language files tested for these with



if(Ext.view.View){
if(Ext.grid.Panel){
etc


My understanding is that ext.js and ext-debug.js loads components dynamically ( more efficiently ) so the code in the locals testing from existents of components fails as there undefined (not loaded).

I changed my index to this



<link rel="stylesheet" type="text/css" href="/extjs4/resources/css/ext-all-gray.css">
<script type="text/javascript" src="/extjs4/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="resources/css/basketassetscss.css">
<link rel="stylesheet" type="text/css" href="resources/css/BoxSelect.css">
<script type="text/javascript" src="/extjs4/locale/ext-lang-nl.js"></script>
<script type="text/javascript" src="app.js"></script>


Then at the top of the app.js added Ext.loader


Ext.Loader.setConfig({
enabled: true,
}),
Ext.application({
name: 'Iomail',
autoCreateViewport: true,
more...


This worked, however is this efficient?, I'm I loading classes I don't need?

When I build my production version what should I use ext.js or ext-all.js?

Thanks
Harry