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().
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 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');
What is the Sencha's way of preloading the dependencies?
Inside controller, is it better to put views, stores in arrays like this:
views: ['Full.Path.To.View', 'Full.Path.To.View'],
stores: ['Full.Path.To.Store', 'Full.Path.To.Store']
or just inside requires:
requires: ['Full.Path.To.View', 'Full.Path.To.View', 'Full.Path.To.Store', 'Full.Path.To.Store']
In some cases (when I want Ext.syncRequire()) works only the second option so I wanted your opinion. So, this is being called inside Controller, not inside app.js in Ext.application.
Thank you!
EDIT:
This is my solution and vision of how it should be:
var views = ['MyApp.view.Login.LoginForm', 'MyApp.view.Main.Index'];
var models = ['MyApp.model.Company'];
var stores = ['MyApp.store.Tables'];
var senchaData = ['Ext.field.Text', 'Ext.Button'];
var dependencies = [].concat(views, models, stores, senchaData);
Ext.define('MyApp.controller.Login', {
extend: 'Ext.app.Controller',
requires: dependencies,
config: {
refs: {
loginForm: '#loginForm',
loginButton: '#loginForm #loginButton'
},
control: {
loginButton: {
tap: 'onLogin'
}
}
}...
You have to understand how controller dependencies get resolved by the classmanager because that makes the difference.
Note: Last time I dig into the controller classes was with version ExtJS4.2 so something might have change slightly.
These arrays (models,views,controllers) have some benefits.
One benefit is cleaner code due to the different arrays a second is that the controller can predict the namespace of each class base on the app namespace and the array. You have to know that these arrays get resolved a definition time!
Now these three arrays are nice but the classmanager didn't know them that is why the Ext.app.Controller inject a appropriate hooks for doing so. The hook get triggered when the class get extended and will require all classes found in one of the four array (models,stores,views,controllers). This force the classmanager to load these classes immediately.
Note that the Ext.app.Application is the only one that initializes the controllers, but since ExtJS4.2 it is possible to do it your own with only little effort.
That is all I can say based on your info. If this doesn't help please be more precise in which case loading fails.
Edit
Why not define it this way? It is better to read, isn't it?
Ext.define('MyApp.controller.Login', {
extend: 'Ext.app.Controller',
views: ['Login.LoginForm', 'Main.Index'],
models: ['Company'],
stores: ['Tables'],
requires: ['Ext.field.Text', 'Ext.Button'];
//...
}
I recently stumpled over the appProperty within the the Ext.app.Application class and wondered why would I use it. I would require access to App instance anyway to then access a variable that again contains the instance? Maybe I am stupied but for what is this property?
I guess you have a misunderstanding here; The name property just defines a namespace of the Application along with a getter Method for it (getApplication()) but it will not provide you with the current instance of that application unless you call the getter or use the new appProperty.
Lets say you have the following application
Ext.application({
name: 'App',
appProperty: 'instance',
launch: function() {
// some more code
}
});
the you can access this application from any Component by calling either
App.getApplicatio();
or
App.instance
Where the second will be bit faster cause it is no method call and for sure you can define the name of this property. So I guess you see this property is quite useful!
Note that a namespace is always a object in javascript. That is the
reason why you are able to place properties into it.
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.