View Full Version : Extjs 4.1.0 MVC - Grid continously shows loading mask while store has reloaded

1 Sep 2012, 12:33 AM
I am using extjs(4.1.0) MVC .
I have a custom grid set up with combo box filter, datepicker filters etc. I am attaching snippets from the controller, view, and store.

The response coming in is different from the model structure, hence, the response is intercepted by overriding a read() of the story proxy.
Also data needs to be sent as Json data in payload, so the buildRequest() of store proxy is also overridden to add json data to request. (all sort, paging params are also added here)
Adding to this - the view has infinite scrolling.

The view loads fine the first time. But on combobox change/date change, store is reloaded with passing these as json params in request.

I see the response in XHR in firebug/chrome, but the grid continously shows the loading mask, waiting for loading.. Kindly help on what could be going wrong.

Ext.define('Message.store.ListingStore', {
extend: 'Ext.data.Store',
model: 'Message.model.ListingModel',
autoLoad: true,
remoteSort: true,
buffered: true,....
proxy: {
type: 'ajax',
actionMethods: {
read: 'POST'
url: 'http://localhost:8080
buildRequest: function(operation) {
Ext.apply(request, {
params: null,
jsonData: Ext.apply(request.params, {
page: operation.page,
start: operation.start,
limit: operation.limit,
........return request;
root: 'data',
successProperty :'success'


Ext.define('Message.controller.Listing', {
stores: ['ListingStore','SubscriptionStore','SubCategoryMasterStore','PriorityMasterStore'],
models: ['ListingModel'],
views: [
init:function () {
var controller = this;
'messagelisting combo' : {
select : this.handleComboSelect

'messagelisting datefield' : {
select : this.handleDateSelect
handleComboSelect : function(gridview, el, rowIndex, colIndex, e, rec, rowEl) {

handleDateSelect: function(gridview, el, rowIndex, colIndex, e, rec, rowEl) {
this.getStore('ListingStore').load({callback: function(response){


This is a very complex case, so i am unable to post the entire code.
Thank You.

1 Sep 2012, 9:40 AM
Please try 4.1.1, as the masking has received some attention in the latest release.


2 Sep 2012, 4:21 AM
I updated the version and tried again. No luck.

Let me give you more details on this. Since extjs does not provide support for multiple level grouping in a grid, i have a custom look for the grid with the group main header -> then sub header -> messages showing up.

Also to remember the grid supports infinite scroll. I have a doubt here - since the total messages say are 8, and i suppose the grid is expecting only 8 records to be rendered, i ovverride the read() of proxy, add 2 records above actual messages to show their main header and sub header. Could this be a possible issue? as inclusive of headers there are 12 rows being rendered, while total=8. (see image)

[Also tried to increment total to include count including group headers - altered the count in read()]
Another possibility, i am supposing is that the grid is still waiting for some data to be delivered, hence showing the loading mask continuously.

This is happening on any event change - on select of combo Box, select event of date field, sort on field ...the store gives back response, but grid keeps showing "loading.."

Kindly let me know of what you think. Ref image attached.

(Also - on change of conbox filters - when i reload load and is result is empty , the grid still shows loading and does not refresh with new store response. {"data":[],"total":0,"success":true}

2 Sep 2012, 7:13 AM
Any errors in the console. It seems your screen is not completely rendered.


3 Sep 2012, 3:40 AM
Some relief here,
Writing to the thread surely helped me realign my thoughts and get a some solution.
I got the combo-select events , data change events and sort - to reload store and render on view without the never ending 'loading' mask showing up.

Change : changed the pagesize=20 of store to pagesize=50
(also i have reduced all buffer zones to 0 - leading/trailing for test purposes)
Note : existing grid size changed from 610px to 210px(lesser than 610), things work again.
So a response which has 8 records renders well.

I have noticed this earlier as well; for responses with lesser rows, the grid plays foul for rendering. (or i have not understood the nuances of infinite scroll)
Kindly explain to me the relation and importance of the following attributes in terms of infinte scroll -

pagesize, height of grid, total (returned in response).
How a scroll height is decided. What shud be the height of a table? (usually we have a set height decided by a designer, so we need to set a right pagesize?)
what i need now i a clear understanding of how all are linked?

Thank you so much.