自定义最大化最小化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 : '&nbsp;'
			};
			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。

评论

5 楼 IT_小丸子 2014-06-30  

首先感谢jobar，然后我在实际使用中发现一个问题，由于我放大的panel本身是在boder样式底下，所以放大后出现错位问题，在64行加panel.setLocalXY(0,0);修改成功

4 楼 jobar 2014-06-19  

还需要将full_screen_view容器放在viewport上的cardlayout中

3 楼 jobar 2014-06-19  

u010114717 写道

你好，我最近在使用你的这个插件，确实很好用，但是出了一个问题。我的页面由iframe组成，在中间iframe中弹出这个窗口只能在中间部分显示，我想在整个浏览器上最大化，所以把create('Ext.window.Window')改成了create('top.Ext.window.Window')，这样最后可以在整个浏览器上最大化了但是关闭的时候却返回不过去了，报出了Ext.get(...)未被发现的异常，请教这是个什么问题，有什么解决办法么？

也可以自己写一个函数实现最大化最小化功能：

    onToggleMaximize: function(tool, panel) {
        var vp = Ext.ComponentQuery.query('qui')[0],
            cl = vp.getLayout(),
            fsv = vp.down('#full_screen_view');

        var pnl, parent;

        if (tool.panelId === undefined) {
            // first time - save references for both panel and parent
            pnl = panel === undefined ? tool.up('panel') : panel;
            tool.panelId = pnl.getId();
            parent = pnl.up();
            tool.attachTo = parent.getId();
        } else {
            pnl = Ext.getCmp(tool.panelId);
            parent = Ext.getCmp(tool.attachTo);
        }

        // see if we also have a collapse/expand tool that we need to hide
        var collapse = tool.previousSibling();
        if (collapse === undefined || collapse === null)
            // try next sibling
            collapse = tool.nextSibling();
        // make sure "collapse" is a tool
        if (collapse && collapse !== null) {
            if (collapse.xtype !== 'tool')
                collapse = null;
        }

        Ext.suspendLayouts();
        if (tool.type === 'maximize') {
            tool.setType('restore');
            tool.tooltip = 'Click to restore';
            parent.remove(pnl, false);
            fsv.add(pnl);
            if (collapse && collapse !== null)
                collapse.setVisible(false);
            cl.setActiveItem(1);

        } else if (tool.type === 'restore') {
            tool.setType('maximize');
            tool.tooltip = 'Click to maximize';
            fsv.remove(pnl, false);
            parent.add(pnl);
            if (collapse && collapse !== null)
                collapse.setVisible(true);
            cl.setActiveItem(0);
        }
        Ext.resumeLayouts(true);

        return false;
    }

2 楼 u010114717 2014-04-30  

你好，我最近在使用你的这个插件，确实很好用，但是出了一个问题。我的页面由iframe组成，在中间iframe中弹出这个窗口只能在中间部分显示，我想在整个浏览器上最大化，所以把create('Ext.window.Window')改成了create('top.Ext.window.Window')，这样最后可以在整个浏览器上最大化了但是关闭的时候却返回不过去了，报出了Ext.get(...)未被发现的异常，请教这是个什么问题，有什么解决办法么？

1 楼 u010114717 2014-04-30  

厉害。