Ext.ux.plugins.blind

[jmariani]

More a work in progress and proof of concept than a final product.
It adds 'slideIn' and 'slideOut' effect to panels, like OSX does.

Consider it very primitive, but good starting point.

Congrats to Animal & Sean McDaniel for providing the initial code & ideas. And to Ext team for providing us Ext. And Saki for providing so great tutorials.

Try it and share your comments.

Here's the code:


// create namespace for plugins
Ext.namespace('Ext.ux.plugins');

/**
*
* @author Jorge Mariani
* @date April 15, 2010
*
* @class Ext.ux.plugins.blind
* @extends Ext.util.Observable
*
* Config options for panel:
*
* modal: if set to true, will mask the page (Same as a modal window)
* slideFrom: Element to align the panel to and start the animation. If not set, Ext.getBody() will be used.
*
* Function added:
*
* dismiss: Call this to slideOut the panel.
*/
Ext.ux.plugins.blind = function(config) {
Ext.apply(this, config);
};

// plugin code
Ext.extend(Ext.ux.plugins.blind, Ext.util.Observable, {
init:function(panel) {
Ext.apply(panel, {
show: panel.show.createSequence(function(){
if (!panel.rendered) {
this.render(Ext.getBody());
}

if (panel.modal) {
// var mask = Ext.getBody().mask();
var mask = Ext.get(document.body).mask();
panel.el.position('fixed', Number(mask.getStyle('z-index')) + 1);
}

if (panel.slideFrom) {
panel.el.alignTo(this.slideFrom, 't-t');
} else {
panel.el.alignTo(Ext.getBody(), 't-t');
}
panel.el.slideIn('t', {
callback: function() {
panel.el.visible = true; // Ext bug. Flag not set causes enableShadow to fail.
},
scope: this
});
})
, dismiss: function(){
panel.el.slideOut('t', {
callback: function() {
panel.destroy();
// Ext.getBody().unmask();
if (panel.modal) {
Ext.get(document.body).unmask();
}
},
scope: this
});
}
});
} // end of function init
}); // end of extend

Ext.preg('blind', Ext.ux.plugins.blind);

// end of file

[ajaxvador]

demo ?

[wemerson.januario]

Any demo?
Usage?
Thanks for sharing.

[jmariani]

demo ?

A small and primitive demo... (http://www.bdmexdemo.com/blinddemo/hello.html)

[ajaxvador]

realy good

[jmariani]

Tku.

[Stju]

If You move or resize the window, panel stays in the same position. Panel should move along with window, or any other parent it is attached..

[jay@moduscreate.com]

Sean McDaniel did it for Ext JS 2.x and 1.x: http://www.extjs.com/forum/showthread.php?27505-2.x-Ext.ux.WindowBlind

[jmariani]

Yes, that's why I credited Sean. Also, this is a plugin for a panel, not for a window. And, like I said, is more a proof of concept than a finished product.

Thank you!

[ajaxvador]

blind bug in portlet !!