自定义最大化最小化ExtJs插件

由于ExtJs的panle组件本身是不可以处理最大化最小化事件的，我们实现的原理就是写一个自定义handler函数，将工具栏所在的panel给包含到一个window组件里面。当window关闭的时候触发hide事件，在hide事件里面再进行处理：将panel还原到原来的位置。所以在处理事件里面我们要记录原来组件的一些基本属性，包括它的父类组件及其宽度，高度大小位置等信息。
1. 自定义插件

/**
 * @author cz186008
 * Define one common maximize tool component 
 */
Ext.define('overridepackage.MaximizeTool', {
	extend: 'Ext.util.Observable',
	alias: 'plugin.maximize',
	init : function(ct) {
		var maximizeTool = {
			itemid : 'maximize',
			handler : this.handleMaximize,
			scope : ct,
			type : 'maximize',
			qtip : 'Maximize'
		};
		ct.tools = ct.tools || [];
		var newTools = ct.tools.slice();
		ct.tools = newTools;
		for (var i = 0, len = ct.tools.length; i < len; i++) {
			if (ct.tools[i].id == 'maximize')
				return;
		}
		ct.tools[ct.tools.length] = maximizeTool;
	},
//最大化处理函数
	handleMaximize : function(event, toolEl, owner) {
		var panel = owner.up('panel');
		panel.originalOwnerCt = panel.ownerCt;
		panel.originalPosition = panel.ownerCt.items.indexOf(panel);
		panel.originalSize = panel.getSize();

		if (!toolEl.window) {
			var defaultConfig = {
				itemid : (panel.getId() + '-MAX'),
				width : Ext.getBody().getSize(),
				height : Ext.getBody().getSize(),
				resizable : true,
				draggable : true,
				closable : true,
				closeAction : 'hide',
				hideBorders : true,
				plain : true,
				layout : 'fit',
				autoScroll : true,
				border : false,
				bodyBorder : false,
				frame : true,
				pinned : true,
				modal : true,
				title : "Preview Window",
				bodyStyle : 'background-color: #ffffff;'
			};
			toolEl.window = Ext.create('Ext.window.Window', defaultConfig);
//隐藏的时候绑定最小化处理函数
			toolEl.window.on('hide', handleMinimize, panel);
		}
		if (!panel.dummyComponent) {
			var dummyCompConfig = {
				title : panel.title,
				width : panel.getSize().width,
				height : panel.getSize().height,
				html : ' '
			};
			panel.dummyComponent = new Ext.create('Ext.panel.Panel',
					dummyCompConfig);
		}

		panel.tools['maximize'].setVisible(false);
		toolEl.window.add(panel);
		panel.originalOwnerCt.insert(panel.originalPosition,
				panel.dummyComponent);
		panel.originalOwnerCt.doLayout();
		panel.dummyComponent.setSize(panel.originalSize);
		panel.dummyComponent.setVisible(true);
		toolEl.window.show(this);
		function handleMinimize(window) {
	        this.dummyComponent.getEl().unmask();
	        this.dummyComponent.setVisible(false);
	        this.originalOwnerCt.insert(this.originalPosition, this);
	        this.originalOwnerCt.doLayout();
	        this.setSize(this.originalSize);
	        this.tools['maximize'].setVisible(true);
	    }
	},



});

2. 使用插件
在要使用的panel里面包含自定义插件引用：
主意plugins行

Ext.define('Extention.override.view.TriagePanel', {
	requires: ['overridepackage.MaximizeTool']
}, function() {
...
items:[{
                        	  title: ''
                        	  xtype: 'gridpanel',
                        	  frame: true,
                              border: 0,
                              itemId: '',
                              store: '',
                              plugins: 'maximize',
	  }]						  
...
});

3. 效果：
下图前面是一个panel，右侧是最大化plugin，后面的图是最大化的效果，点击关闭还原panel。
[img]http://dl2.iteye.com/upload/attachment/0091/5227/3ef3b5b7-4ec7-3cfe-923c-92d7c01e3559.jpg[/img]