How to customize loadmask for dataview

I have extended Ext.LoadMask and overridden the getTemplate() function to use my own style classes. This has allowed me to customize the load mask to look exactly like I want it. It works fine when I am calling setMask() before an AJAX call because I can specify the xtype of the LoadMask I want to use. However, when loading a DataView from a Store I don't see a way to specify a particular load mask so it uses the default.

There is a "masked" configuration property of DataView that accepts an xtype and a message but even when I specify my load mask as in the code example below the default load mask is still displayed. Here is the complete configuration for one of the DataView's I'm trying to customize with my own load mask:

Code:

{
   xtype: 'dataview',
   flex: 1,
   scrollable: {
      direction: 'vertical',
      directionLock: true
   },
   masked:{
       xtype:'phoneLoadMask', // xtype of my LoadMask extending Ext.LoadMask
       message:'Loading...'
   },
   itemTpl: '<div class="phone-system-data-row">'
                + '  <span class="phone-system-data-label">{label}</span>'
                + '  <span class="phone-system-data-value">{value}</span>'
                + '  <span class="phone-system-data-uom">{uom}</span>'
                + '</div>',
   store: 'SystemDataStore',
   scrollToTopOnRefresh: false
}

If I could just get the DataView to use my load mask the problem would be solved. Thanks in advance for any ideas on this.



How to customize loadmask for dataview