I'm coding with extjs 4. I want to provide two language buttons for the French language and English language. I have googled the problem, but I didn't find a solution. I hope I will find a solution here.
You can place your translations (for example as overrides) in different files and load them according to the language. You can see an example here:
http://docs.sencha.com/ext-js/4-0/#!/example/locale/multi-lang.html
Sencha introduced the following approach:
Keep translatable-text in separate configs:
Ext.define('MyForm',
extend: 'Ext.form.Panel',
// the next config is translatable
submitBtnText: 'Submit',
// ...
Create another js file which overrides locale configs and include it (js file) in html page:
// MyForm-fr.js
Ext.define('MyFormFr', {
override: 'MyForm',
submitBtnText: 'soumettre'
});
Take a look at Sencha's official example.
I have token a look at the Sencha's official example, but now I want to add the translation to my application. In the example that I have followed the files.js and the file.html are in the same directory, but my application follows the MVC architecture, so it differs.
I have a js file that contains words to translate:
if (Ext.app.ContactForm) {
Ext.apply(Ext.app.ContactForm.prototype, {
formTitle: 'Contact Informatie (Dutch)',
firstName: 'Nom',
lastName: 'Prénom'
});
}
And my application contains just one file.html, so I don't know where to put the file.js, in the same directory of the file.html or in the view folder! And how it can be readable bye all the application
Related
I have a requirement that I want to add namespaces in requires conditionally.
e.g. In below example I want to add 'views.popupgrid' name space on specific condition. Currently it's always loaded.
requires: ['Ext.window.MessageBox','views.popupgrid','user.MyUser' ]
Conditional dependencies are not supported by the Sencha toolchain. While you would be able to write in a text editor of your choice
requires:[
(location.hash=='#test')?'testpopup':'normalpopup'
]
and this would work in the uncompiled version, Sencha Cmd would not be able to compile it correctly, and would throw errors.
Therefore, Sencha Architect does not support this syntax.
What you can do, while staying Standards-compliant: you can use Ext.Loader.loadScript, e.g. like this:
Ext.define('MyForm',{
extend: 'Ext.form.Panel'
initComponent:function() {
var me = this;
me.callParent(arguments);
if(x==3) Ext.Loader.loadScript({
url:'MyCustomFormComponent.js',
onLoad:function(){
me.add({
xtype:'mycustomformcomponent'
});
})
});
}
})
Please note that in this case you will always have to deliver MyCustomFormComponent.js alongside the minified app.js, because the dependency cannot be resolved by the toolchain. Also, depending on the connection, there may be a visible delay before the resource is loaded and the component is added to the form.
It is usually faster and smoother to always load the dependency, especially if you intend to deliver the app as a single minified javascript file (e.g. using Sencha Cmd).
I'm in need of a way to dynamically create my translations file for my app.
Right now i can create the json object like this, in my app
{
Name: 'User Name',
}
but i can't find a way to tell my $translateProvider to use this to translate my site, Do anyone know how this can be done?
Use angular-gettext translator
angular-gettext.rocketeer.be
I am completely confused on the namespaces in ExtJS5 application. I am using a common folder under the sencha workspace where I keep code I will be using for multiple pages (multiple SPA's). In one application definition I have the following snippet:
Ext.define('Admin.Application', {
extend: 'Ext.app.Application',
name: 'Admin',
namespaces: ['ALT'],
requires:[
'ALT.GlobalLib',
.....
In my common/src folder I have a file called AltGlobalLib.js with the following snippet:
Ext.define('ALT.GlobalLib',{
extend: 'Ext.app.Controller',
/**/
/** Custom Field Manipulation Methods
/**/
...
The file is loaded but I get a warning the the namespace for ALT.GlobalLib is missing and to add it to my Application Class namespace properties.Possible to get a firm example of how to properly separate the common code from the rest of the apps? Thanks!
I think you need to setPath and designate the name and folder.
Check out the docs on this. And particular setPath on Ext.Loader in the api docs
Here is an example:
Ext.Loader.setPath('NameSpace', '../path/to/files');
I'm working in a Sencha application.
I've created a couple of Utilities classes as singleton components (helpers, services, etc).
I'm using alternateClassName to have a shorter name for those classes.
It works perfect, but stop working after compiling for production.
I don't know why, and need help to get this working!
Looks to the following example:
I've created a demo application using sencha cmd for simplicity. The application is "Demo".
The whole application is as default, but I've added a util folder inside app, with a single file Helper.js. This is the code:
Ext.define('Demo.util.Helper', {
singleton: true,
alternateClassName: 'Helper',
test: function () {
alert('It works !');
}
});
Then, I just need to update app.js to require this new file, and update the launch function to call test method after add the main view. So here is the code to use in app.js:
requires: [
'Ext.MessageBox',
'Demo.util.Helper'
],
The launch function:
launch: function () {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('Demo.view.Main'));
Helper.test();
},
Now, if I try the example, after load the app, an alert msg is shown successfully.
But after compile it using sencha cmd
sencha app build production
I get this error:
I know the problem is with alternate class name, because if I use the full name (instead of alternate class name), it works anyway. But I want to use alternate class name, otherwise it doesn't make any sense.
Any idea on what's wrong with compiled version ?
TIA!
Milton
After some time, we realized that Sencha has a bug when compiles singleton classes for production (works on testing also).
The solution was to remove the singleton flag, and create application variable for all of the singleton classes, in the launch method.
For example:
Demo.Helper = Ext.create('Helper');
Hope this help!
UPDATE
Last version of Sencha Cmd is full of freaking bugs!
I found a lot of other issues after fixing this ones, and finally, I found this link http://www.sencha.com/forum/showthread.php?288972-MyAppName.app-not-working-on-build-production&p=1064635
I start my app in extjs 4, using a
Ext.Loader.setConfig({enabled: true});
but when using my custom controls, I always need to explicit require this controls:
Ext.require('App.controls.CoCheckbox');
Ext.define('App.view.atendimento.FormAgenda', {
extend: 'App.controls.CoForm',
...
My control:
Ext.define('App.controls.CoCheckbox',{
extend: 'Ext.form.field.Checkbox',
alias: 'widget.cocheckbox',
inputValue: true
});
Why I need to explicit declare those requirements?
In Extjs you organize your code in files then, your App.view.atendimento.FormAgenda is in one file and your App.controls.CoCheckbox is in another file. I assume App.view.atendimento.FormAgenda uses at least one instance of App.controls.CoCheckbox so, when extjs needs to create an App.view.atendimento.FormAgenda instance, it requires to download the file where App.controls.CoCheckbox is defined.
Basically, extjs has no other way to know the component dependencies. You have explicit them.