I have an application built using extjs 6.2. I want to use single instance of the store with multiple grids and charts as the same data need to be displayed in different places. If I make new instance of the store I generate new request to fetch the data. How could I used single instance on multiple places.
Thanks,
Majid
You can declare your store in the view model of your main view component:
stores: {
mystore: {
model: 'mymodel',
autoLoad: true
}
}
And then you can access it descendant components via binding:
xtype: 'grid',
bind: {
store: '{mystore}'
}
Or you can create the store anywhere in your application (before it is required by the components) assigning it a storeId.
Unique identifier for this store. If present, this Store will be
registered with the Ext.data.StoreManager, making it easy to reuse
elsewhere.
Ext.create('App.store.MyStore', {storeId: 'myStore'});
And then access it using Ext.getStore:
Ext.getStore('myStore')
Or even specifying only the the storeId for the component's store config, if they accept this (the grids do):
xtype: 'grid',
store: 'myStore'
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 have two grids:
xtype: 'grid',
id: 'grid1',
store: Ext.create(SomeStore)
xtype: 'grid',
id: 'grid2',
store: Ext.create(SomeStore)
The store has autoLoad to false and I'm loading the data from the init function:
this.grid.store.load({some, parameters, for, loading});
When I load the first grid, everything is great, but when I load the second grid, the first grid has the same data as the second (changed). So, basically it means that I don't have the 2 different instances of the SomeStore. How can I create them?
They are not created with the storeId but with the full name.
Solved it. I've added the whole grid dynamically to a panel inside my init function and it worked.
I got a problem that is simply driving me insane. I created a window based widget that displays a grid. Ok, until now that is nothing special, but, each grid has to deal with different data. For Example: Imagine a homebroker, there is the widget that show the offers of a stock. So, the instance A has to show INTC, instance B has to show CSCO and instance C has to show FB. But when I deal with the data of INTC for instance A, the grids of instances B and C are updated too. So I understand that all grid a sharing the same store.
I've already tried to create a store dinamically, but, it didn't work.
The question is, how do I do to separate this? There is another way to update a grid without stores?
You need to create an instance of the store, you're probably declaring them like this:
{
xtype: 'grid',
store: 'theStore'
// Rest of the properties
}
What you need to do is the following:
{
xtype: 'grid',
//column definitions etc...
initComponent: function() {
var me = this;
var lStore = Ext.create('App.store.MyStore');
Ext.apply(me, {
store: lStore
});
me.callParent();
}
}
This creates a unique instance of the store, if you reference the store like this: store: 'MyStore' you just get the same store, and when you sort, page, filter, ... all the stores do the same.
Hope this helps you, since you didn't share any code.
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();
}
});
I need to update a Store based on some information that I have.
I have a table in the document, that uses some Store to keep data,
and in separate part of page I have a button that needs to add some information to the Store (and table). I got a bit confused, so, I just ask here all I need to know:
Which property in table configuration needs to be specified to locate table later?
Which call I need to make to find the table and locate its store?
How I can generate and append data to the table's existing store?
The "table" you are referring to is Grid in ExtJS terminology.
1. To get the grid for later use, you need a reference to that object. There are many ways in ExtJS to get hold of this reference.
Using Javascript Variables: Most simple way is to have a javascript variable that will hold the reference. This is usually done when the grid is created. For example:
var myGrid = Ext.create('Ext.grid.Panel', {
// All the configs...
});
You can use the myGrid variable to get access to the grid.
Using ComponentManager: When an ExtJS component is created, it gets registered with the component manager. You can always get hold of an ExtJS component from this register. The manager tracks each component with a unique id. To use this method, you will have to define a unique id for your grid component and later use the famous Ext.getCmp() method. Here is an example:
var myGrid = Ext.create('Ext.grid.Panel', {
id: 'myGrid', // Unique id for the grid
// All other configs...
});
Using this method is NOT the best practice.
Using itemId and Component Query: A better method than the above two; you can use the itemId config and ComponentQuery. ComponentQuery class provides a selector-based searching for Sencha Components analogous to DOM querying. Example:
var myGrid = Ext.create('Ext.grid.Panel', {
itemId: 'myGrid',
// All other configs...
});
And to get a reference, you may call the query() method from a container or use Ext.ComponentManager (this is global).
Accessing in MVC controller: If you are developing your application using MVC, you can make use of this method. A controller have reference array namely: refs. (Internally, the method makes use of ComponentQuery and selectors to access the component). Refer MVC guides and examples to see how this works..
2. Once you obtain the grid with any the above techniques, you can get the store simply by calling the method: getStore(). This returns the store object (Ext.data.Store). Example:
myStore = myGrid.getStore();
3. Refer the Ext.data.Store documentation. you can manipulate your grid's store using methods like add(),load(),remove() etc...
FYI.
It is not
Ext.Cmp()
it is
Ext.getCmp('myGrid')