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.
Related
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'
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 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();
}
});
This could be a stupid question, but I cant figure out how to access store in gridpanel
var grid = new Ext.grid.GridPanel({
.....
store: store,
......
listeners: {
'beforerender' : function(grid) {
//grid.getStore();
}
}
I want to loop through the store , but grid.getStore() returns empty object.
you can simply do grid.store.
If you know it will be filled with data before the grid renders (you seem to be calling this from the grid beforerender event) you can do grid.store.getRange() to get the records that you want to loop through, as you mentioned in your question.
store variable is still visible in your listener code :)
In my application, I´m creating several modal windows which contains a form and an editorgrid. In order to re-use the components, I´ve created the combos, fieldtext, checkbox and other stuff as variables, and only add the necesarry to each window. One of those variables is an editorgrid, xtype: 'editorgrid', and there is the issue:
If I add the variable myEditorGrid to the panel, it works OK the first time I open the window, but the second time that any window has to render the same editorgrid, then the fields cannot be edited any more.
If I create the editorgrid inside the panel (and don´t use the variable), then it works OK everytime I open the window, but I need to copy&paste the same code over and over to all the windows, and that´s not very professional.
I thought the problem is that the variable is not destroyed, and made sure that the windows is closed, but I don´t know how to destroy the variable, and even if this is the solution.
Any idea?
Thanks
You can't reuse an EditorGrid in this manner, because it's column model gets destroyed after use.
The best way to reuse a component is to use the Ext.extend method described here, and then in your initComponent have something like..
initComponent : function() {
this.cm = new Ext.grid.ColumnModel({
columns: [
//define columns here
]
});
this.ds = new Ext.data.JsonStore({
//store config
});
//...
}