Results 1 to 9 of 9

Thread: Change cursor to busy on entire browser page when processing

  1. #1
    Sencha Premium User
    Join Date
    May 2015
    Posts
    168

    Default Change cursor to busy on entire browser page when processing

    When my application is busy on a synchronous call I want to change the cursor to indicate to the user that something is happening.

    My application uses synchronous calls because I have implemented a custom piece of middleware where the browser is effectively the presentation layer and all browser actions (data entry, button presses etc) are relayed to the server that then instructs the browser what to do next (i.e. sends property changes to existing components or creates new components such as windows)

    I seem to be able to change the cursor for a particular control but I'm not sure how I can change the cursor so that wherever the user is on the page they will see the busy cursor. I have searched but not found a satisfactory solution that is not essentially a bodge or workaround.

  2. #2
    Sencha User
    Join Date
    Apr 2013
    Posts
    914
    Answers
    105

    Default

    Maybe sth simple like the following:
    Code:
    Ext.getBody().setStyle('cursor', 'wait');

  3. #3
    Sencha Premium User
    Join Date
    May 2015
    Posts
    168

    Default

    That doesn't work. Any controls will continue to show their own mouseover cursors

  4. #4
    Sencha User
    Join Date
    Apr 2013
    Posts
    914
    Answers
    105

    Default

    How about just masking everything instead:
    Code:
    Ext.getBody().mask('Crunching data...').setZIndex(99999).setStyle('cursor', 'wait');

  5. #5
    Sencha Premium User
    Join Date
    May 2015
    Posts
    168

    Default

    Thanks hakimio.. That brings up a semi-opaque mask - and doesn't change the cursor. But some of the synchronous calls will be a few mS and others will be perhaps a second. I don't want the screen to flash. I just want the cursor to show busy!

    I guess the mask could be used if (a) it could be completely transparent and (b) the mask cursor could be set to wait - but I don't know how to do this and it seems a bit of a bodge..

    I thought this would be a very common requirement with an elegant and simple solution..

  6. #6
    Sencha User
    Join Date
    Apr 2013
    Posts
    914
    Answers
    105

    Default

    You can change the mask style to whatever you like using simple CSS. You can make it fully transparent if you want.
    The mask cursor is set to wait - check again the example code I posted.

  7. #7
    Sencha Premium User
    Join Date
    Jan 2014
    Location
    Italy
    Posts
    116
    Answers
    5

    Default

    What about using Ext.window.Toast ?

  8. #8
    Sencha Premium User
    Join Date
    May 2015
    Posts
    168

    Default

    Hi again hakimio. I've found a problem with the mask. I have managed to get it sort of working as described (although Themer doesn't allow you to set the backcolour of the mask). However there is a problem..

    When the user changes the selection in a grid I want to do some processing and stop the user doing anything else so display the mask. However if the user right-clicks rows in a grid it will normally fire the "selectionchange" event - and then when you release the mouse button it fires the "rowcontextmenu". However. if you display the mask whilst processing the "selectionchange" event and during the processing the user releases the mouse button then instead of the rowcontextmenu being fired instead it determines that the user right clicked on the mask.. and so you get the horrid "back / reload / view source" context menu instead. Also, when you display and remove the mask it will trigger activate events on any windows..

    So actually the mask is a really horrid way of making async ajax calls appear sync. And in many ways it would be better to make sync ajax calls as this will stop event processing. But the trouble with sync calls is (1) they are frowned upon and (2) there is still no way of displaying a busy cursor (because the window is not refreshed)

  9. #9
    Sencha User
    Join Date
    Apr 2013
    Posts
    914
    Answers
    105

    Default

    Maybe the best solution is to figure a way to avoid any synchronous operations or replace JS single page frontend with some other multi-page frontend solution which suits your way of doing things better?

Similar Threads

  1. Replies: 6
    Last Post: 1 Oct 2015, 11:54 PM
  2. One cursor style for the entire application
    By ferrosoftware in forum Ext: Q&A
    Replies: 2
    Last Post: 18 Oct 2013, 1:47 PM
  3. Change the cursor shape when the mouse cursor is over a grid row
    By xambalaxm3 in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 21 Sep 2010, 12:48 AM
  4. Cursor to Busy Icon
    By mathaj77 in forum Ext GWT: Discussion
    Replies: 1
    Last Post: 11 Aug 2009, 9:21 PM
  5. Setting the cursor to busy
    By peternorman in forum Ext GWT: Help & Discussion (1.x)
    Replies: 0
    Last Post: 4 Mar 2009, 11:25 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •