ux.plugins.ContainerMask

[hendricd]

The following Container plugin, provides a flexible masking agent for any Ext.Container (Viewport, Panel, TreePanel, Toolbar, etc) .


Ext.namespace('Ext.ux.plugins');
Ext.ux.plugins.ContainerMask = function(opt) {
var options = opt||{};

return {
init: function(c) {
Ext.applyIf(c,{
showMask : function(msg, msgClass, maskClass){
var el;
if(this.rendered && (el = this[options.el] || Ext.get(options.el) || this.getEl?this.getEl():null)){
el.mask.call(el,msg || options.msg, msgClass || options.msgClass, maskClass || options.maskClass);
}
},
hideMask : function(){
var el;
if(this.rendered && (el = this[options.el] || Ext.get(options.el) || this.getEl?this.getEl():null)){
el.unmask.call(el);
}
}
});
if(options.masked){
c.on('render', c.showMask.createDelegate(c,[null]) ,c, {delay:10, single:true}) ;
}
}
};
};Optional Plugin config options:
msg: the default mask message to be displayed when shown.
msgClass: CSS className applied to the message
maskClass: CSS className applied to the mask
masked: if true, the mask is shown during initial Container rendering
el: element to use as the masking element. Can be a property name (ie: 'bwrap'), or even a specific element elsewhere on the page. Defaults to main container element.Usage:

Ext.onReady(function(){
var tabs = new Ext.TabPanel({ //any container tho
title: 'Test',
plugins: [new Ext.ux.plugins.ContainerMask ({msg:'Don\'t Touch!', masked:true })],
renderTo: document.body
});
tabs.hideMask(); //you must control on/off
tabs.showMask('Hold on...');
});

[garraS]

Nice plugin!

Thanks a lot!

garraS

[Choleriker]

Hello,

i am using a similar implementation. With my implementation you can show/hide a mask for any Ext.Element:

[code]
// Let's add a couple new convenience methods to Ext.LoadMask
Ext.apply(Ext.LoadMask.prototype,{
visible:false,
onBeforeLoad : function(){
if(!this.disabled && !this.visible){
this.el.mask(this.msg, this.msgCls);
this.visible = true;
}
},
onLoad : function(){
this.el.unmask(this.removeMask);
this.visible = false;
},

show:function(msg, append){
if(!this.disabled){
if(msg){
this.msg= append?this.msg + '<br/>'+ msg:msg;
}
this.onBeforeLoad();
}
},
showDefer:function(msg,fn,config){
config || (config={});
this.show(msg, config.append||false);
if(fn){
config = Ext.apply({scope:this,millis:100,"arguments":[],appendArguments:false},config);
fn.defer(config.millis,config.scope,[].concat(config.arguments),config.appendArguments);
}
},
hide:function(){ this.onLoad(); }
});



/**
F

[jsakalos]

What your extension adds to, let's say, Ext.getBody().mask('Mask message')?

[hendricd]

What your extension adds to, let's say, Ext.getBody().mask('Mask message')Not sure who that was directed at but, the override Choleriker previously posted came from this (http://extjs.com/forum/showthread.php?t=11304)thread I created back in the 1.1+ days.

This ux provides a simpler approach for the novice who wants to add loadMask support to other 2.0+ Containers besides gridPanel, etc...

One benefit: It's real easy to wire masking up to (optionally, a specific element within) the Container:


items: [{
xtype:'panel',
//mask the toolBars too: ('bwrap')
plugins: [new Ext.ux.plugins.ContainerMask ({msg:'Don\'t Touch!', masked:true, el:'bwrap' })],
.....
}],

Done, loadMask added (doubt you need it though ;) ).

[jsakalos]

Yeah, I see. Inline config could come handy sometimes...

I've been using panel.body.mask(....) or panel.getEl().mask(...) so far...

[jay@moduscreate.com]

Yeah, I see. Inline config could come handy sometimes...

I've been using panel.body.mask(....) or panel.getEl().mask(...) so far...

to me the element method is where the magic is.

[Shaguar]

How can i change the position of the loading message? i tried it with a custom msgClass but it didnt work.

[wm003]

Very useful! Thanks for sharing:)

[hendricd]

To handle lighter-weight Components (like Ext.DataView). (See Post #1)

[moegal]

Doug,

Nice plugin. This is very handy. How would I change the message on a mask that is already applied? Would I just give it an id and then reference by id.msd = 'newtexthere' or similar.

Initialising...

Please Wait...

Loading...

Etc.

Thanks, Marty

[mjlecomte]

Did you try just calling showMask () again? Arguably you should just work with Element.mask() anyway.

[moegal]

calling showMask() again seems to work as long as the mask was set from the function and not in the config. Thanks.

I am not sure how to use Element.mask(). I will do some research on it now, thanks.

Marty

[mjlecomte]

If you look at the code in the first post it's there. Doug's plugin code just makes a convenience wrapper for it.

Next place to look would be to go to the source file for Element and look at what it is doing.

[moegal]

that is just what I was doing, thanks!

[moegal]

How can I show the spinning gif with this? I tried to set iconCls but to no avail. Do I need to create a custom class?

Marty

[hendricd]

How can I show the spinning gif with this? I tried to set iconCls but to no avail. Do I need to create a custom class?

Marty

Your best bet, is simply specify your custom mask and mask-msg classes:




plugins: [
new Ext.ux.plugins.ContainerMask ({
msg:'Don\'t Touch!',
masked:true ,
maskClass : 'custom-mask',
msgClass : 'custom-msg'
}
)],


Study the ext-el-mask and ext-el-mask-msg CSS rules for a general guide.

[moegal]

Doug,
Thanks

Marty