1. #1
    Ext User
    Join Date
    Apr 2010
    Posts
    6
    Vote Rating
    0
    dcohen is on a distinguished road

      0  

    Default Load mask for grouping-grid w/many rows delayed--any way to make it show immediately?

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


    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?

    Thanks.

    --DC

    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.

  2. #2
    Sencha User darthwes's Avatar
    Join Date
    Mar 2010
    Posts
    633
    Vote Rating
    -11
    darthwes can only hope to improve

      0  

    Default


    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?
    Wes

  3. #3
    Ext User
    Join Date
    Apr 2010
    Posts
    6
    Vote Rating
    0
    dcohen is on a distinguished road

      0  

    Default


    > 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:
    Code:
    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:

    Code:
    var encountersCheckbox = new Ext.form.Checkbox({
            id:'encounters-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.
           ...SNIP..
    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

    Code:
    var gridPanelStore = new Ext.data.GroupingStore({
            url: 'somePhpFile.php'
            ,id:'gridPanelStore_id'
            ,method: 'POST'
            ,reader: gridPanelStoreReader
            ,groupField:'id'
            ,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'}   
         
            ,listeners:{
                beforeload:function(){
                    mask.show();
                }
                ,load:function(thisStore, records, options){ 
                     ....DO A BUNCH RECORD-FILTERING HERE...
                     mask.hide();
                }
            }
    }
    Anyway, I hope that's enough code to get things rolling -- as I said above, if need be, I can post more later.

  4. #4
    Sencha User darthwes's Avatar
    Join Date
    Mar 2010
    Posts
    633
    Vote Rating
    -11
    darthwes can only hope to improve

      0  

    Default


    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.
    Wes

  5. #5
    Ext User
    Join Date
    Apr 2010
    Posts
    6
    Vote Rating
    0
    dcohen is on a distinguished road

      0  

    Default


    > 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:

    Code:
     
    ,listeners:{
                     beforeload:function(){
                             mask.show();
                }
    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).

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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:
    Code:
    doStuff: {
      mask.show();
      this.doMoreStuff.defer(1, this);
    },
    doMoreStuff: {
      // heavy processing here
      mask.hide();
    }
    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.

  7. #7
    Ext User
    Join Date
    Apr 2010
    Posts
    6
    Vote Rating
    0
    dcohen is on a distinguished road

      0  

    Default


    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.

    --DC

  8. #8
    Ext User
    Join Date
    Oct 2010
    Posts
    9
    Vote Rating
    0
    rav_leg is on a distinguished road

      0  

    Default


    http://www.sencha.com/forum/showthre...r-lagging-mask.

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

  9. #9
    Sencha User darthwes's Avatar
    Join Date
    Mar 2010
    Posts
    633
    Vote Rating
    -11
    darthwes can only hope to improve

      0  

    Default


    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?
    Wes

Similar Threads

  1. show load mask before form panel is completed?
    By kohyea in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 9 Jan 2009, 8:16 AM
  2. No way to make loading mask show in EditorGrid
    By ajaxE in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 21 Apr 2008, 11:06 PM
  3. How can I make panel show load but no send a request to the server!
    By hysuper6 in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 14 Mar 2008, 4:11 AM
  4. Replies: 3
    Last Post: 18 Jan 2008, 4:48 AM
  5. How to show empty rows/grouping in a grid
    By zaps in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 4 May 2007, 10:55 PM

Thread Participants: 3

Tags for this Thread