Question about js files including

[elkidos]

Hi guys,

First, I use ASP.NET for my back end and my web app manages two language : french and english.

Now, I want to structure my js files like so :
- application.js (the main entry point)
- sales.js (contains grids, panels, etc, for the sales section)
- contacts.js (contains grids, panels, etc, for the contacts section)
- and so on...

Well, I got a problem here. Since I have to wait after ASP.NET to render my page with the appropriate language, I can't include, for example, the file sales.js before application.js, cause the grids, panels and others extjs components in sales.js must know the right language to use (for example, to render headers column grid in french) AND the page isn't render yet.

The point is that I can only access my labels (in the right language) in the application.js file, within Ext.onReady(function() {...});

I wonder is there a way, like including the js files within the Ext.onReady(function() {...}) or something like that, so the grids, panels and other things could render properly??

How can I structure my application to make sense?

Thanks a lot!

[aconran]

elkidos -

Take a look at how the Ext components are structured to see how you can also enable internationalization support in your own application.

By placing your language specific text strings on the prototype of your components you can easily globalize a component... for example say we have a grid with users:



Ext.ns('App');
App.UserGrid = Ext.extend(Ext.grid.GridPanel, {
firstName: 'First Name',
lastName: 'Last Name',
initComponent: function() {
// initialize columns with
// this.firstName and this.lastName
}
});


Now let's say we want to change this component's text to French:


if (App.UserGrid) {
Ext.apply(App.UserGrid.prototype, {
firstName: 'Prénom',
lastName: 'Nom de famille'
});
}


This is a good way to structure your components so that you can easily internationalize your application. The only thing you need to do is make the determination of when to include the 2nd file to convert the app from english to french.

[elkidos]

Thanks for your reply aconran. I understand your approach by defining custom properties tu use within the initComponent of the grid.


The only thing you need to do is make the determination of when to include the 2nd file to convert the app from english to french.

This is what I really want to know, where to put this 2nd file to make the traduction?

Or maybe I have to put all the traduction functions, like the one you wrote :


if (App.UserGrid) {
Ext.apply(App.UserGrid.prototype, {
firstName: 'Prénom',
lastName: 'Nom de famille'
});
}

within Ext.onReady(function() {...}); somewhere, perhaps at the end of the function? I don't see any other way to make this work..

[aconran]

elkidos -

Because you are dealing with classes and not manipulating the dom you don't need to wrap the code inside of an Ext.onReady.

it would work something like this:


<script src="UserGrid.js"></script>
<!-- server-side logic around whether or not to include UserGrid-fr.js -->
<script src="UserGrid-fr.js"></script>

[elkidos]

Thanks aconran, it works like a charm. :)