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(); |
相关推荐
11.实现右键菜单的功能,自定义一个按钮 12.文章预览功能、修改文章功能 13.查看文章评审(重写分页组件的部分方法) 14.完善分页组件、查看文章评审后台功能 15.由菜单树操作右边的工作区域、完成管理员管理文章...
ExtJs4.2没有直接提供下拉树这个组件,但是有例子可以用,文件位置:ext-4.2.1.883\examples\ux\TreePicker.js 但是它有点小毛病吧:默认显示了根节点;达到最小高度时再展开节点,高度不能自动调整。 所以我做了一...
EXTJS4.2学习入门教程 EXTJS4.2学习入门教程 EXTJS4.2学习入门教程
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
extjs 4.2 参考书 开发
Extjs4.2入门教程详解,及API文档。
WMC2.0-Client.zip是一个基于Extjs4.2的开发框架,其实是个只有大框架的,并没有其他功能,您可能会骂我标题党“通用权限管理系统,通用后台模板”,呵呵,其实不是这样的。 整个WMC系统分为WMC2.0-Server服务端...
ExtJs4.2正式版
下拉(条件)搜索实例extjs4.2(亲测可用).在前辈的基础上增加了php后台数据的调取整合和下拉搜索的联动
用Ext编写的多文件上传组件,已封装。 支持多文件上传,文件下载,文件删除,
ExtJS4.2版本完整版,里面例子什么都有!分享分享
ExtJS4.2入门案例 博客:http://blog.csdn.net/coco2d_x2014/article/details/52986835
php+extjs4.2翻页搜索实例.php
extjs4.2 分页combo动态条数 源码,不懂的加群
框架spring+springmvc+mybatis+extjs4.2目录框架
Extjs4.2练习小Demo,新手第一次上传啦,多要点分好下载更多的资源的说
extjs4.2更换主题,实现各种皮肤互换。
基于EXTJS 4.2 MVC环境搭建,并从后台获取数据在extjs Grid上显示出来
Extjs4.2 Chart柱状图实例。