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.
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 using CMD and extjs. In my Main.js i have something like
Ext.define('Abc.view.main.Main', {
extend: 'Ext.panel.Panel',
xtype: 'app-main',
header:{
height: 25,
titleAlign: 'center',
title: 'new tile,
padding: '0 0 0 10'
},
requires: [
'Abc.view.main.MainController',
'Abc.view.main.Component'
],
If you see requires, i am requiring some classes. If i remove all the classes in requires and leave it like
requires: []
all the pages are loaded properly only. So whats the benefit i am getting by adding files in requires.
First, your application (Application.js) has a list of required views and stores and controllers. If your controller and component are in these "global" lists, they are already loaded when your requires list is evaluated, so you don't see a difference at all. If you reuse the component in other projects, and you forget to add it to the Application.js, you may see a difference.
If they are not already loaded when they are needed, three things can happen:
The xtype is not yet registered with ComponentManager, so if you instantiate by xtype, this will fail ("could not resolve dependency").
If you instantiate by full name, you may get the warning that the components are loaded synchronously, which is slower than the asynchronous loading of the whole requires list at once.
If you instantiate using variables, Sencha Cmd is completely unable to add the required files to the dependency tree, and they may be missing in the built file. Example:
var doWindow = true;
var component = doWindow?'Ext.Window':'Ext.panel.Panel';
Ext.create(component,{
...
});
Because the requires list is also used by Sencha Cmd to resolve the dependency tree and make a correct partial order of the component definitions in the built js file.
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 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 a store "Contacts". In my application i'm using this in 2 grids and 1 combo box. In Each of these components have varying screen space so i need to define pageSize. What is the best practise for this scenario. Is it better do create 3 different stores. ( I'm using MVC ) . If so, are there naming conventions.
Edit
Currently i load the stores in the onLaunch method in my controller
var partsStore = this.getPartsStore();
partsStore.pageSize = 15;
partsStore.load({
scope: this
});
and reference this store in my view
Ext.define('Mis.view.JobPartList', {
extend: 'Ext.grid.Panel',
alias: 'widget.jobpartlist',
store: 'Parts',
Yes, you should create multiple store instances. Not sure what you mean about naming conventions, the store name should stay the same whether you have 1 or multiple instances.
Based on the code you've posted above, it's not going to work, because by adding it to the class definition you're telling it to explicitly share the store.
Ext.define('Foo', {
// ...
initComponent: function(){
this.store = new MyStoreType();
// ...
this.callParent();
}
});