由于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。
- 大小: 265.2 KB
分享到:
相关推荐
extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件
类似extjs中viewport的panel viewport只能渲染到body,而这个panel可以渲染到任何html元素,并且这个panel会自动变大!自动填充到最大化
自定义高级查询Extjs
extjs插件开发教程
ExtJs自定义消息框,自带的消息框,可以下载来了解一下。
eclipse安装extjs插件,安装配置文件,文件下载。
1.ExtJS自定义组件,图片按钮为例. 2.此图片按钮背景完全为图片,没有边框,需要使用者提供2张图片,一张初始化用,一张点击后用,可在'imgPaths:'属性里填写,格式为'01.jpg~02.jpg' 3.解压后请将所有附件放置您extjs...
话不多说,这是一个便宜而已好用的dreamweaver的extjs插件,喜欢用extjs的朋友赶快来下载吧~~
Extjs相关插件
由于开发WEB需要一个WEB计算器插件,在网上找EXTJS4计算器插件没有一个,找extjs4.0计算器找到一个,但由于代码太多,在主界面上写太多代码,自我感觉以后看起来吃力,思路一下子不好摸到。因此写了这个插件,分享给...
eclipse-ExtJs插件。 应该是目前写js和ExtJs最好的工具。 先到http://www.easyjf.com/上下载ExtJS2.0。 说明: 1,将下载的压缩包解压到eclipse的安装目录,完成后重启(自动会加载插件,也可CMD ECLIPSE目录 使用...
extjs验证 extjs验证 extjs验证 extjs验证extjs验证 extjs验证 extjs验证 extjs验证
xtype : 'jxcombo' //配置项 jxValueField:要获取值得字段名称,默认null //公共方法 getJXValue():返回自定义字段的值,如果没有自定义字段,则等价Ext.form.Combo类的getValue()方法
一款简洁的外观基于EXTJS的日期选择插件,日历插件,在网页上选择日期使用的小插件,按照ext DatePicker素材及思想简化重新实现日历选择器,尚未实现:键盘导航,小时分钟选择, 1.Date api ,某日属于周几,某月...
Extjs4.2自定义ComboTree
自己做的,关于EXTJS 实现最下化功能,点击新建窗口,能创建一个窗口,并在工具条里新建一个那妞与之对应,点击按钮实现最小化,再次点击按钮还原窗口。是我花了三的时间研究出来的,与大家分享!!
extjs中有时候查询需要通过日期(年月)查询。而这就是一个只显示年月的日期插件,很好用
vscode 开发 ExtJS/ExtAngular 的插件,希望对你有帮助。
Extjs_htmleditor插件
Myeclipse下ExtJs插件的spekt的安装