View Full Version : Load mask for grouping-grid w/many rows delayed--any way to make it show immediately?

3 Nov 2010, 2:29 PM
We have a grouping grid in a panel, which is itself in a tab panel. There's a checkbox in the tab panel that toggles between grouping on and off. The checkbox's listener puts up a load masking on the grid, so if the switch is time consuming, theoretically the user will see the mask.

However, when the grid has a moderately large number of rows, say a few hundred, it can take 5-10 seconds for the switch to take place when the checkmark is clicked. Worse, the mask doesn't show up until most of that 5-10 seconds has elapsed and the checkbox's state-change is delayed as well.

Is there some way, perhaps by deferring the grid's rendering, to have the mask show up right away as well as having the checkbox change state immediately?



P.S. Please note, as mentioned above, that the grid is in a panel which is in a tab panel, which, if I understand things correctly, means that the grid's rendering is handled by one of these containers and not by the grid--I imagine this might be have significance here.

Also, just in case it's relevant, there's only one tab panel for the moment, which is always visible; this could change in future.

3 Nov 2010, 3:29 PM
Ext.PagingToolbar solves the underlying problem. Either that or your code is out of order. Either way you should be careful with the number of loaded records as browsers are not created equally. IE is infamously slow and generally incapable of "browsing" the "web." Meanwhile, Chome and Safari can handle quite a bit more, but eventually you're going to find a hard spot. The answer has always been paging. The alternative, as mentioned, is that you're calling things out of order. Post some code?

3 Nov 2010, 7:07 PM
> Ext.PagingToolbar solves the underlying problem

Yeah, I should've mentioned that I've read many threads suggesting paging when people start having more than few rows in their grids and...that's a non-starter :-)

> IE is infamously slow

This is sad, given that we're currently stuck in an IE-only world -- the codebase is old and we're slowly trying to get out from under it, hence Ext JS.

> The alternative, as mentioned, is that you're calling things out of order. Post some code?

OK, here we go--I can post larger code snippets later, but for now, this shows the checkbox and its handler, which attempts to put a mask up as its first action...but with many rows it takes a 5-10 seconds before the mask shows up, which defeats the purpose of putting up a mask in the first place.

First, this is the mask:

var mask = new Ext.LoadMask(Ext.getBody(), {msg:"Loading..."});And this is the beginning of the encounter checkbox that toggles between grouping/ungrouping in the grid:

var encountersCheckbox = new Ext.form.Checkbox({
,boxLabel: 'Encounters'
,checked: true
,filterButtons: [button1, button2, button3, button4, button5]

,handler:function(thisCheckbox, checked){
mask.show(); <== The mask is the first line of the checkbox's handler;
if I replace it with an alert, the alert shows immediately
and the checkbox changes state immediately too--as is, it
takes 5-10 seconds for these things to happen when there
are many rows.
One would imagine the mask, as the first line of the handler, would get executed right away and the mask would be shown instantly. But apparently not.

FWIW, BTW, when initially loading the large data set into the grid, the call to mask.show() in the gridPanelStore's beforeload handler does not get delayed, despite the large dataset--that happens right away. Here's the gridPanelStore's code

var gridPanelStore = new Ext.data.GroupingStore({
url: 'somePhpFile.php'
,method: 'POST'
,reader: gridPanelStoreReader
,groupingEnabled: true
,hasMultiSort: true

,multiSortInfo:{sorters:[{field:'id', direction:'DESC'},
{field:'date1', direction:'DESC'},
{field:'adate', direction:'DESC'},
{field:'bdate', direction:'DESC'}]}
,sortInfo: {field:'date1',direction:'DESC'}

,load:function(thisStore, records, options){

Anyway, I hope that's enough code to get things rolling -- as I said above, if need be, I can post more later.

3 Nov 2010, 9:10 PM
OK. So how do you know that your ajax request (store load) has started before your mask is shown? I can not replicate but I admit it's strangely difficult to test, I may be missing something. It seems to me that the mask is shown and then the store load fires, but i never see an ajax request firing off until after the mask is shown, no matter how many records I add.

Edit:I'm sorry, did I miss the point? Are you asking why your UI is slow on IE when you load hundreds of records into a grid? Because you should be paging.

3 Nov 2010, 9:27 PM
> OK. So how do you know that your ajax request (store load) has started before your mask
> is shown?

If I understand your question, I believe that the mask shows up prior to the store loading because this code (from the store definition) suggests that it should and, unlike the checkbox code from earlier, because things actually appear to behave as expected when initializing the grid--the mask shows up, and stays up, and the grid gets its data:

As opposed to the checkbox case that I wrote about above, where there shouldn't be any AJAX happening--the grouping/ungrouping I'd expect are happening client-side w/the data in the previously loaded store.

> I'm sorry, did I miss the point? Are you asking why your UI is slow on IE when you load hundreds of
> records into a grid? Because you should be paging.

A buffering grid that could do grouping would be more in line with our needs, as we're looking to duplicate the functionality of a previous version of our app (also, I'd think that grouping and paging wouldn't really go well together?).

As to what I'm asking, though, it's this: while I (grudgingly) accept the fact that manipulating and/or displaying data might be slower than it should be, why would activities seemingly orthogonal to data manipulation/display, such as toggling a checkbox or showing a mask, also be so very slow (apparently proportionate to the size of the data)?

And, more importantly, are there ways of working around these issues?

It's late, so perhaps we'll revisit this tomorrow (along with anyone else who might care to chime in).

3 Nov 2010, 11:42 PM
Javascript only has a single execution thread. This means that if you mask a grid and continue with some heavy processing, the mask will only show up after the entire method has finised.

If you want the mask to show then you need:

doStuff: {
this.doMoreStuff.defer(1, this);
doMoreStuff: {
// heavy processing here

Regarding showing a big grouping grid:
Would it be an option to use a TreeGrid (either the one from the SDK examples or MaximGBs user extension). That way the grid only needs to load the groups and loading the records for a group is only done when a group is expanded.

4 Nov 2010, 10:32 AM
Ah, thanks Condor -- I had found out about "defer" yesterday, but I wasn't clear on how best to use it and whether it would be what we needed, so your example is most welcome.

I hadn't thought about the TreeGrid--I'll have to look into it. It does look similar, at least on the outside. I can imagine that it might take some work to make it work the way we have our grouping grid working now, though. But definitely food for thought.

Thanks again.


4 Nov 2010, 11:43 AM

If that's going to be any helpful...

4 Nov 2010, 2:29 PM
Tree grids, doms updating slowly, grouping stores, holy cow, I love this thread. Anyone with a solution for IT demanding IE be the only browser in the world?