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');
Related
I'm quite new to Extjs, I'm needing to pass some data to my stores, I mean, I need to fetch some URL from a singleton configuration file, but reading in the Official documentation I am not able to find a require method in the store. So, I wonder how to tell my store to fetch that URL from a configuration file?
I am not sure which version of Extjs you are using. The answer is based on Extjs6 which I am using. We add the singleton (mostly common configs) files in the application(Application.js) level so that the file will be available across the entire app.
For example,
singleton file is 'Some.Globals.configs'
//Application.js
Ext.define('Some.Application', {
extend: 'Ext.app.Application',
requires: [
'Some.Globals.configs'
]
});
Then anywhere in the application, you can access directly as mentioned below.
Some.Globals.configs.respectiveConfig
If you are extending Ext.data.Store you should be able to use requires property
eg.
Ext.define('My.awesome.Store', {
extend: 'Ext.data.Store',
requires: [
'My.global.Config'
]
...
});
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'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
I started with https://github.com/mclin/extjs-mvc-example, and set out to modify it so that it used Ext.application, instead of just using Ext.Create() for a subclass of Ext.app.Application.
So far so good, until I try to use the getApplication() function, which isn't there.
The code of the app definition looks like ...
Ext.application({
name: 'Books',
extend: 'some.class.name',
controllers: ['Books'],
...
});
The result of this is a global object named 'Books', alright, but it does not define getApplication(), contrary to the Ext documentation.
From memory getApplication was added after 4.1.1, 4.12 or 4.13 IIRC.
Also, you shouldn't use extend with Ext.application().
I have got a ExtJs application (MVC).
So, I define many controllers, models, views and stores.
At now, the structure of my project is not easy.
For example my model:
Ext.define('KP.model.account.AccountList', {
extend: 'Ext.data.Model',
fields: ['parameter', 'string_value']
});
I define my store with model like this:
Ext.define('KP.store.account.AccountList', {
extend: 'Ext.data.Store',
alias: 'store.s_AccountList',
model: 'KP.model.account.AccountList',
......................................
});
If I want to move some .js files, I must rewrite many paths in classes definitions.
So, how can I declare my classes (by alias maybe) and use them more effectively?
It's need, If I move files on files tree.
Thanks!
I believe stores are the only classes that refer to Model classes by their full name. Controllers refer to model classes by their name minus the 'AppName.model' prefix. So a model MyApp.model.User is referred in the controller class as simply User.
If you have a finer grain separation of code than MyApp.model.specific.User is referred by controller as specific.User .
Aliases are used to register xtypes and are also used by the Ext.widget method.