I am trying to set my own image for the LoadMask.
I am using the LoadMask as an alert message that describes why a form has been disabled. This form is within a modal that has opened from the window.
I want the alert message to be centered and confined to the form on scrolling, so when you scroll down out of sight of the form, the message stays over the form.
I have achieved this with the LoadMask, however, now I just want to remove the loading image in the mask, and set it as a single alert image.
I know its achievable with a grid panel by using the viewConfig, but it doesn't seem to work for form panels.
Here is the layout I am using, and after items, I just add a lot of forms. I had also tried to use the wait message for forms, but I couldn't get it to remain on screen.
var layout = Ext.create( 'Ext.panel.Panel',
{
border : false,
// padding: '10 0 10 10',
autoScroll: true,
//defaults: {padding:'10 10 0 10'},
defaults: {
waitMsgTarget: true,
viewConfig:{
loadingCls: 'custom-loader'
},
listeners:{
afterlayout: function(form, layout, eOpts){
if(form && form.disabled){
var alert;
switch(form.name){
case 'Settings':
alert = 'Select a profile to edit this menu.'
break;
case 'activeswitchbox':
alert = 'Select a profile or profile group to edit this menu.'
break;
case 'enabledisable':
alert = 'Select a profile or profile group to edit this menu.'
break;
case 'roomassignment':
alert = 'Select a profile or profile group to edit this menu.'
break;
default:
alert = 'Select a profile to edit this menu.';
}
// var myMask = new Ext.LoadMask(form.getEl(),
// {
// msg:alert,
// });
// myMask.show();
form.getForm().load({waitMsg:'Wait'});
//form.view.loadMask.show();
}
}
}
},
items:
[
{
xtype: 'form',