I have a Panel with multiple grids. I'm trying to make some kind of global refresh button by which I mean, a button that will refresh all the grids and open tabs, without losing data like when F5 is pressed.
With two of the grids it was easy just get the store and load it but the third one makes a problem. When I try the same as with the previous two which works OK I get URL is undefined.
Here is my code:
reloadInstructionsStore: function() {
var reloadInstructionSt = this.getStore('Instructions');
var activeCat = this.getActiveCategory();
reloadInstructionSt.clearFilter(true);
reloadInstructionSt.filter({
filterFn: function(item) {
return item.get('category_id') == activeCat;
}
}),
reloadInstructionSt.load();
},
The only reason I can think of is that the store that I use here is defined different from the other 2. It's not with PROXY and CRUD, but looks like this:
Ext.define('MY.store.Instructions', {
extend: 'Ext.data.Store',
model: 'MY.model.InstructionRecord',
autoLoad: true,
data: g_settings.instructionsApi.initialData
});
Is the problem here and is there a way to make things work even like this?
Thanks
Leron
You do not need to reload this store, the data is provided on initial page load. The variable g_settings.instructionsApi.initialData tells me that the data is available as static on the page. All you need to do in this case is reset the filter, and just remove the reloadInstructionSt.load(); call.
If you actually do want the data to reload from the server, you will need to give your store a url that it can get the data from and the server will have to be able to serve this data up.
Related
I am working on .jsp page, spring MVC, dojo 1,10.2. I have created JSP page with dojo tree with checkbox. When I click next button, it takes to next jsp page. if I press back button, tree reloads and all the checkbox becomes unchecked.
How can I get the all previous checked checkbox checked , when press the back button. Do I need to save the checkbox state before going to next page and then check the checkbox referring to saved data.
Is there any other way to achieve this?
The web is a stateless place, so yes, you will have to save state somewhere, there are several ways to do that... you can rely on back-end services storing them in databases/files/..., or you can use one of the new HTML5 features like session storage or local storage.
With session storage for example you could do something like this:
First you need some functions to load and store the data. Since you can only store simple strings inside the session- and localstorage, I'm going to serialize them to JSON:
var store = {
save: function(object) {
sessionStorage.setItem('fruits', JSON.stringify(object));
},
load: function() {
return JSON.parse(sessionStorage.getItem('fruits') || '{}');
}
};
Then on each change you can store the data:
registry.byId("apple").on("change", function(value) {
fruits.apple = value;
store.save(fruits);
});
registry.byId("banana").on("change", function(value) {
fruits.banana = value;
store.save(fruits);
});
registry.byId("lemon").on("change", function(value) {
fruits.lemon = value;
store.save(fruits);
});
Initially you can load the data:
var fruits = store.load();
And use it to initialize the widgets their state:
registry.byId("apple").set("value", fruits.apple || false);
registry.byId("banana").set("value", fruits.banana || false);
registry.byId("lemon").set("value", fruits.lemon || false);
This is an example: http://jsfiddle.net/3b2s15xm/ Try to change the options and reload the page. Normally the checkboxes would be unchecked again, but now it will actually reload the data from the session storage when you load the page.
One thing you need to know is if the browsers you need to support, have these HTML5 capabilities, which you can check on caniuse.com.
Is it possible to change url for Store which is assigned to grid? I do sth like that, but it looks very ugly. I am sure there is another way:
Ext.define('APP.controller.List', {
extend : 'Ext.app.Controller',
stores : ['Users', 'Reports'],
...
// after click on some button
var lv = this.getUserlist();
lv.store.getProxy().api.read = 'data/reports.json'; // UGLY WAY to change url
lv.store.reload(); // and now my list has new content
In other way I have one list but I would like to load data there using 2 stores (users and reports). I know that store is assigned to list (grid) forever.
How do it better without change url in store->proxy ?
Thanks for help.
Use Store.setProxy() method instead:
var lv = this.getUserList();
lv.store.setProxy({
type: 'ajax',
url: 'data/reports.json'
});
I would also recommend to rethink your design if it calls for one Grid with two Stores. Something's wrong here.
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 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.
I have several extjs components in my page, the chart, gird ,formPanel and ect, and now I meet some problems about the refresh of them, take the gridPanle for example:
This is the grid codes:
var myStore=new Ext.data.JsonStore({
autoLoad:true,
fields:['name','age'.....]
});
var grid = new Ext.grid.GridPanel({
stroe:myStore,
colums:myColumns
//....other config
});
When the reload event of the stroe if acted(Triggered by user),the store will get new data from the server side, the the grid panel refresh, this is fine,
however sometimes the data from the server is null(for example, there is not data found according to the request from the client),if so, the grid panel also hold the data of last requst,
how to make the grid refresh (show nothing) and show something to user that no data found?
So are other components in my page,most are some charts.
I have thought use add a handler to handle the event of the refresh of the component,before it refresh, check the store, if the store is null, then do something,howeverI found that I can not get the store of a component,also their event are different,for eample:
For the GridPanle,there is a event of beforerender
http://dev.sencha.com/deploy/dev/docs/?class=Ext.grid.GridPanel
For a chart, there is a event of beforerefresh
http://dev.sencha.com/deploy/dev/docs/?class=Ext.chart.Chart
So use the render or refresh?
Any ideas?
a "null" response from the server should generally be considered an error.
In your grid example, if nothing matches, there should be some representation of a record set with zero records. For a typical JsonStore, the response should look like this:
{ total:0, items:[] }
(assuming a totalProperty of "total", and a root of "items")
That way, it's still a valid response (even if it's not null).
If your server is sending back "null", or an empty raw response (a zero-length string), JsonReader doesn't know how to handle it, and errors or bails.