PDA

View Full Version : Add Cancel button to LoadMask



DSoa
8 Jun 2012, 7:49 AM
I've been asked to add a Cancel button to a LoadMask, but I've been having trouble getting it to work. The problem I'm running into is any <div> that is rendered under the LoadMask's <div> gets styled with a background-image of the "spinning" loading.gif and padding that leave room for it. I tried overriding some styles like background-image and padding, but it seems like a bad way to go because my button doesn't look like a normal Ext button either because the background styling is wiped out.

What is the correct way to do this?

Here's what I tried (I created a function so I could update the loading message and disable/enable the "west" pane of my border layout):


var setLoadingMessage = function(msg) {
if (msg === false) {
if (loadMask != null) {
loadMask.destroy();
loadMask = null;
}
Ext.getCmp('center-panel').setLoading(false);
Ext.getCmp('west-panel').enable();
} else {
if (loadMask == null) {
Ext.getCmp('center-panel').setLoading(false);
loadMask = new Ext.LoadMask(Ext.getCmp('center-panel'),
{
msg: '<span id="my-mask">'+msg+'</span>',
msgCls: null,
listeners: {
afterrender: function(lm) {
var el = lm.el.createChild({tag: 'div', id: 'cancel-load-button', style: 'background-image: none; padding: 2px; margin: auto; border: 0;'});
lm.innerButton = Ext.create('Ext.button.Button', {
renderTo: el,
text: 'Cancel',
style: 'background-image: none; padding: 2px; margin: auto; cursor: pointer; cursor: hand;',
handler: function() {
alert('Button clicked');
}
});
}
}
})
} else {
$('#my-mask').text(msg);
}
loadMask.show();
Ext.getCmp('west-panel').disable(); // also disable the left pane
}
}
Thanks.

DSoa
8 Jun 2012, 8:08 AM
You can ignore the "msgCls: null" in that example. I threw that on a whim and forgot to remove it from my example.