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.
Related
I'm working on a ExtJS.Grid that uses a Ext.data.Store with jsonp proxy and Ext.PagingToolbar to control paging. It's all working fine.
But some users are complaining that they further browse pages, leave the grid, and when they come back they are back to page 1. They want "the grid to remember" the page they were and starts on it.
I use a Ext.onReady(function(){},false); to define all components and another Ext.onReady(function(){}); to create the grid with a store.loadPage(1); to make the first load after everything is done.
If I could listen to some event from the Ext.PagingToolbar, when a new load happens, and capture the page it was used, I could pehaps store it in some cookie or something, and retrieve it to load that page again.
I looked on http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.toolbar.Paging and found no event that could be used. Anybody has any idea of where I could do it?
You can track the change event of the Ext.toolbar.Paging and remember the currentPage in a cookie.
pagingtoolbar.on('change', function(pb, pageData) {
Ext.util.Cookies.set('lastGridPage', pageData.currentPage, new Date('1/1/2016'));
});
And setup your grid to load that page on afterrender
grid.on('afterrender', function() {
var pageNumber = Ext.util.Cookies.get('lastGridPage') || 1;
grid.store.loadPage(pageNumber);
})
I'm using Sencha Touch 2 and wonder how I listen to the Store's refresh event in my Ext.dataview.List? I want that my list automatically updates when there are new records in my store, so the refresh event seems to do the job for me, but how do I set up a listener?
Edit: Thanks to Anand Gupta I realized my problem isn't refreshing the list but just displaying it. So I will give you some more information and hope you can help me. I use NavigationView inside tabpanel. I have one list loading from localstorage which works just fine, if you tap disclose indicator you come to a form with a button "auto complete".
By tapping autocomplete the following method is called:
e.stopEvent();
var lastname = this.getNewUserForm().down("textfield[name=lastname]").getValue();
if(lastname!=="")
{
var complete = this.getApplication().getController("Complete");
this.getUserNav().push(complete.getView());
complete.setSearch(this.getNewUserForm().down("textfield[name=firstname]").getValue(), lastname);
}
else
{
//errormessage
}
The getView() method is a ref with auto create and the "setSearch" Message on Complete Controller simply loads the Store through jsonP Proxy:
var store = Ext.getStore("Playernames");
store.setParams({firstname:firstname, lastname:lastname});
store.load({callback: function(){
console.log(this);
}});
I added a log to see that the store is properly loaded and store is properly loaded.
Thanks for help
Ok after some more hard search I found my bug: I had a List view embedded in a Panel with an undefined layout. So I changed the layout to "fit" and it works fine.
What is the best way to query unrendered components? I tried to query them as always using .query( '[group=abc]' ).
However this time, the components, having each group: abc, are not yet rendered, since they are used in an editable grid (first click it).
What I am trying to do is:
get data via Ajax for comboboxes
create an unknown number of comboboxes
put that Ajax data into each combobox
Problem: I want that boxes to be filled with the data on Ajax success
loading the data on Ajax success answer fails since I am missing a method to get my comboboxes via the property group=abc
loading the data on combobox creation fails too, since the Ajax success answer is not yet back
You will not be able to use ComponentQuery for unrendered components. You best bet is probably your last list item: Load the data into the combo stores when the combos are created. The key will be to mask the action that creates the combos (is this a grid row editor or something like that?) until the Ajax call is complete.
myComponent.setLoading(true);
Ext.Ajax.request({
//your request info here
success: function() {
//now unmask your component, allowing your combos to be created:
myComponent.setLoading(false);
//do other stuff here
}
});
When a save, or create is tossed towards the server, the server responds with a new randomly created object. The object can be one of many different Classes, and Backbone responds to these differentiating objects and loads a relative view.
I can only seem to figure this logic out on bootstrap, as no view has been loaded yet, so I can based on what information I am randomly receiving from the server, bootstrap and navigate to that specific route.
However, I am stuck on trying to figure out how to do this when I save an object, and receive my return data.
Here's my code broken down.
The information is saved.
#model.save(#model.toJSON(),
I have a listenener waiting for this save :
constructor: (options) ->
super(options)
#model.bind 'change:verb', _.chooser, options
_.maestra_chooser is a mixin I have in a utility belt :
_.mixin
_chooser : (item) =>
console.log item
Something to note here. The variable item is unfortunately, the same #model that was just saved. No new data there.
What I'm hoping for item to be is the new variable data from the server, so that I can take that data, see what kind of data it is, and then route to the relevant view.
This is where I believe I'm also making an architecturally unsound idea. But for reasons I don't understand enough to explain.
Does anyone know where I can access the return data from the server and appropriately navigate my app to that respective route?
Additional Information
This is how I bootstrap it appropriately :
window.router = new Project.Routers.QuestionsRouter(
{
words: #{ #words.to_json.html_safe }
});
Backbone.history.start();
router.navigate("#{#words.kind_of?(Array) ? "bar" : "foo"}", {trigger: true, replace: true})
The change event is only ever going to give you the model and the value that changed...
You can pass a success callback to your save:
#model.save(#model.toJSON(), success: (model, resp) ->
# do whatever with resp
)
where resp will contain the raw response from the server and model will contain the server side state of your model.
You can also bind to your model's sync event as mentioned in the comments:
#model.bind 'sync', _.masetra_chooser, options
the sync callback is called with arguments: model, resp and options where options is the set of options passed to save.
https://github.com/documentcloud/backbone/blob/9a12b7640f07839134e979b66df658b70e6e4fe9/backbone.js#L383
Not really sure why you are expecting to get data back from a save that'll change your page though. Seems a bit odd.
What type of data are you expecting to receive after a save that wouldn't be in your model?
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.