Custom mask is shown above Window

[Just-Boris]

Ext version: 4.1.1

Code to reproduce:

          var panel = new Ext.panel.Panel({  
             renderTo : document.body,
             width    : 400,
              height   : 400,
              title    : 'Test'
          }); 
         var window = new Ext.window.Window({
              width    : 200,
              height   : 200,
              title    : 'Window',
              autoShow : true,
              items    : [ {
                      xtype   : 'button',
                      text    : 'mask',
                      handler : function() { 
                       panel.getEl().mask('Mask Text');
                      } 
                }]
          }); 

Note I want to set custom text for mask using mask() method of element
If I use panel.setLoading(true), mask is shown under window, but in this case I can't set custom text for mask

[scottmartin]

I do not see this behavior: (tested with 4.1.1)

f242530.png

Scott

[Just-Boris]

If to move a window above, mask text overlaps the window
2012-09-14_1102.png

[scottmartin]

Please try the following instead:

Ext.onReady(function() {

	var panel = new Ext.panel.Panel({
		renderTo: document.body,
		width: 400,
		height: 400,
		title: 'Test'
	});

	var window = new Ext.window.Window({
		width: 200,
		height: 200,
		title: 'Window',
		autoShow: true,
		items: [{
			xtype: 'button',
			text: 'mask',
			handler: function() {
				panel.setLoading('Mask Text'); // to obey zindex
			}
		}]
	});
});

Scott.

[Just-Boris]

That works fine, thanks