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 :)
Related
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 wonder why ExtJS developers decide to remove reload() method in ExtJS 4 Store API. I think it's a bad decision.
Here is my problem. I'm using the following code to initialize a grid's store:
store.load({
params: {
paramName: dynamicParameter
}
});
NOTICE the dynamicParameter variable in the code above.
Then, if I delete some records from the grid, I need to reload the store.
The problem is: the code segment which reload the store should not know the dynamicParameter value.
The code to delete records is like this:
function deleteGridItems(grid, deleteUrl){
// get selected rows
var records = grid.getSelectionModel().getSelection();
// ...... (codes to send request for deletion is ignored) ......
if(success){
grid.getStore().reload();
}
}
Unfortunately, the grid.getStore().reload() above will be an error because in ExtJS 4, reload() function doesn't exist anymore.
So how to reload the store with the same parameter??
Thank you.
If I'm not mistaken load() function now does exactly the same as reload() before. Try it.
you need to set proxy extra params instead specifying it each time on load():
see this http://www.sencha.com/forum/showthread.php?127673-Reload-Store-in-EXT-JS-4
Also note that Ext JS doesn't appear to check before loading whether the store is already loading data. I'm not sure why this is, but it can be fixed by overriding the load() method in a Store or TreeStore.
load: function(options) {
// Loading quickly will cause data in the panel to break
if (!this.isLoading()) {
this.callParent(arguments);
}
},
I haven't experienced issues with grids, but with trees if you press the refresh button very quickly you sometimes get an error and the tree structure breaks:
Uncaught TypeError: Cannot read property 'internalId' of undefined
i am new to ExtJS4.I am using paging toolbar in our project.I am clearing the grid using
grid.getStore().removeAll()
Now problem is with paging toolbar.If we click on the buttons then it is retrieving the store.My doubt is how to clear store in paging toolbar?
Please help me.
Thanking you,
Kushal
I just spent a few hours researching this thing and wanted to share in case someone is still looking for it. It looks like Ext.toolbar.Paging does not listen to the clear event of the store which fires on the removeAll() method. My solution was to sub class it and override getStoreListeners to bind onLoad internal function to the clear event. I am using ExtJS 4.1 by the way.
Ext.define('MyApp.ClearablePagingToolbar', {
extend: 'Ext.toolbar.Paging',
alias: 'widget.clearablepagingtoolbar',
getStoreListeners: function () {
var listeners = this.callParent();
Ext.apply(listeners, {
clear: this.onLoad
});
return listeners;
}
});
You use it by referencing clearablepagingtoolbar in your grid like this:
dockedItems: [{
xtype: 'clearablepagingtoolbar',
dock: 'bottom',
displayInfo: true,
store: this.getSearchResultStore()
}]
First of all, do you have the same store configured for both the grid and the toolbar? If yes, you should try to clear the store itself, and not by using grid.getStore() (e.g. myStore.removeAll() )
If you grid and paging toolbar uses same store, your paging toolbar will work correct. If you use separate stores (It is bad coding style), you need to call this paging panel's store's sync method, to syncronize data.
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
});
//...
}
I have a grid made with ExtJS, and I render it to a div that I define, when a refresh is requested I simply "empty" the div using JQuery and then re-render the grid creating new objects each time:
var grid = new xg.GridPanel({
store: store,
columns: [
...
renderTo: 'db-grid'
And then to empty the div I use this:
$("#db-grid").empty();
This works well for like 3 or 4 refreshes, and then it seems to load really slowly, I imagine this is because it re-creates all these objects again, the only thing that changes each time is the "store." I acquire that through an AJAX request, is there a way to refresh this without creating a new grid each time?
I'm pretty new to ExtJS, and I'm making a bit of a transition here from JQuery, which is why I'm using the "empty()" function from JQuery, if you know of a ExtJS alternative, I would be glad to use that instead,
Thanks!
Take a look at Store's load(Object options) and reload(Object options) methods at http://dev.sencha.com/deploy/dev/docs/.
An example of this functionality can be seen in Ext.PagingToolbar. This class contains a button that refreshes a Grid and its Store, without destroying the Grid each time:
// private
doLoad : function(start){
var o = {}, pn = this.getParams();
o[pn.start] = start;
o[pn.limit] = this.pageSize;
if(this.fireEvent('beforechange', this, o) !== false){
this.store.load({params:o}); // here is the call you're interested in
}
},
doLoad() is then simply called from the method doRefresh():
doRefresh : function(){
this.doLoad(this.cursor);
},
I included this code for the sake of a complete example, but really all you need to worry about is the load() or reload() methods. Make sure to read the API to see a full list of arguments that can be passed into the methods.