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'
]
...
});
Related
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 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.
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.
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();
}
});