View Full Version : Alternate to grid.getView().getEl().mask('Loading...')

17 Feb 2017, 6:11 AM
Let me explain the problem.

I have a UI as below

Menu tree
- page 1(landing page) available for user
- page 2
- page 3

I click a button on page1, it will open page2 and load a grid in page2.

I have this below grid masking syntax for grid on page 2 which works like a charm but only on second attempt of store.load()


as In,

Case1: I refresh my webpage, I land in page1, I click a button on page1 which will open page2 and loads a grid in page2. It doesnt show loading mask in this attempt.

Case2: after performing case1, i go back to page1 manually, click button again and when page2 loads i see loading mask being displayed.

Case3: I refresh my webpage, I land in page1, I click page2 manually, it shows grid with no records. Now i select page1, click a button which will open page2 and loads the grid and I do see loading mask in this attempt.

I am guessing the issue is due to the grid not being rendered completely before mask is applied.

Although I need to mention that below syntax works fine for test 1 and 3, but problem with below ones is that the mask masks grid view/columns/header as well. I wish to see mask applied to the portion below the grid columns. So to naked eye only 'Loading..." message is shown and header/grid columns are not masked, which is why i am masking with "grid.getView()"

Syntaxes which works but is not what i want:
in grid.Panel:
viewConfig : {
loadMask: true



So is there a way i can workaround the problem mentioned in case1 (first attempt scenario) ?.

Any help or guidance is much appreciated.

21 Feb 2017, 2:08 AM
Same issue mentioned in below post


I resolved this by modifying my code so that store load is called only after page is rendered. The issue was caused when load mask is called slightly before page is rendered, as my store load as well as mask load is called explicitly by controller.