Grid v6, v7 - loadMask config ignores html config

[michal]

Hi,

steps to reproduce:

• visit https://bryntum.com/products/grid/examples/paged/

• open web code editor

• add a mock delay to the mocked AjaxStore, make it lengthy - 20secs or so, to trigger loading mask appearing:

  AjaxHelper.mockUrl('/pagedMockUrl', async (url, params) => {
              await new Promise(resolve => setTimeout(resolve, 20000));
              // ... rest of the code
  

• note the loading spinner appearing

• add
  

         loadMask: {       
  
              html: "why u no work?"
          },
  

  to the AjaxStore config

• observe the old loading spinner appearing

Expected result: html overrides the loadMask html.

[tasnim]

Hi there,

loadMask is a widget (LoadMaskable) config — not a Store/AjaxStore config — so putting it on the AjaxStore will be ignored. Also the Mask API uses the text property (it accepts HTML), not html.

Either set loadMask on the Grid, e.g.:

new Grid({
  appendTo : document.body,
  store : {
    readUrl : '/pagedMockUrl',
    lazyLoad : true,
    autoLoad : true
  },
  loadMask : { text : '<b>why u no work?</b>' }
});

or control the mask from store events:

grid.store.on({
  beforeRequest() { grid.masked = { text : '<b>why u no work?</b>' }; },
  afterRequest()  { grid.masked = null; }
});

See LoadMaskable and Mask for details.

Regards,

[michal]

Thanks

[michal]

So, why is there a html config in https://bryntum.com/products/grid/docs/api/Core/widget/Mask#config-html docs, and what does it do?

[tasnim]

We'll investigate why it doesn't work! Here is the ticket to track progress http://github.com/bryntum/support/issues/12337