一个extjs4.2插件的简单例子

阅读更多

quote: http://whatisextjs.com/extjs/extjs-4-2-plugin-example

 

 

I've enjoyed the 4.2 ExtJS release since it came out; especially the new theme and grids. I recently wanted to "puff in" a Panel for some eyecandy, but I quickly realized it's a bit trickier than you might think.

Components don't have slideOut or fadeIn methods like Elements do.

It's not a problem in case of "hiding" actions (i.e. slideOut or puff), which you can accomplish by something like component.getEl().slideOut().

However, in the case where you want to "show" a hidden panel (i.e. slideIn), in a case of deferred rendering (i.e. when creating and showing a new panel on the fly), the getEl() doesn't have a DOM element to show yet, until the panel has been rendered.

The fadeIn method is achieved by showing a panel with CSS opacity 0% and then animating it back to 100%.

I ended up solving this via means of a plugin. Can you think of a more elegant solution?

Plugin

Ext.define('Ext.ux.component.FadeInPlugin', { extend: 'Ext.AbstractPlugin', alias: 'plugin.ux.fadeinplugin', requires: ['Ext.fx.Anim'],   init: function (component) { Ext.apply(component, { style: { opacity: 0 } }); component.fadeIn = this.fadeIn.bind(component); },   fadeIn: function () { var me = this; Ext.create('Ext.fx.Anim', { target: me, duration: 400, from: { opacity: 0 }, to: { opacity: 1 } }); } // eo fadeIn() });

Sample Usage

var p = Ext.create('Ext.panel.Panel', { id: 'thePanel', title: 'Test', html: 'Test', width: 400, height: 300, renderTo: Ext.getBody(), margin: 50, plugins: ['ux.fadeinplugin'] }); // eo panel p.fadeIn();

View Demo on JSFiddle