Extjs Window用法详解
今天我们来介绍一下Extjs中一个常用的控件Window。Window的作用是在页面中创建一个窗口,这个窗口作为容器,可以在它里面加入grid、form等控件,从而来实现更加复杂的界面逻辑。
本文的示例代码适用于Extjs 4.x和Extjs 5.x,在Extjs 4.2.1 和Extjs 5.0.1中亲测可用!
本文由齐飞(youring2@gmail.com)原创,并发布在http://www.qeefee.com/article/extjs-window-in-detail,转载请注明出处!推荐更多Extjs教程、Extjs5教程
创建Extjs Window
创建Extjs Window的代码如下:
//创建window var win = Ext.create("Ext.window.Window", { id: "myWin", title: "示例窗口", width: 500, height: 300, layout: "fit", items: [ { xtype: "form", defaultType: 'textfield', defaults: { anchor: '100%', }, fieldDefaults: { labelWidth: 80, labelAlign: "left", flex: 1, margin: 5 }, items: [ { xtype: "container", layout: "hbox", items: [ { xtype: "textfield", name: "name", fieldLabel: "姓名", allowBlank: false }, { xtype: "numberfield", name: "age", fieldLabel: "年龄", decimalPrecision: 0, vtype: "age" } ] } ] } ], buttons: [ { xtype: "button", text: "确定", handler: function () { this.up("window").close(); } }, { xtype: "button", text: "取消", handler: function () { this.up("window").close(); } } ] });
代码中的Form可以参考《Extjs Form用法详解》。显示效果如下:
id="iframe_0.46412579511038965" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://www.qeefee.com/Upload/wlw/5648786777633088793.png?_=3990424%22%20style=%22border:none;max-width:848px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.46412579511038965',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 524px; height: 346px;">
显示Extjs Window
使用上面的代码创建好的Window并没有显示出来,它只是创建了Window,而这个Window在默认情况下是不显示的。
如果要它显示出来,我们可以通过在配置项中添加autoShow来实现,代码如下:
autoShow: true,
或者,我们可以显示的调用window的show方法:
win.show();
创建模态窗口
Extjs Window还可以作为模态窗口打开。什么是模态窗口呢?当打开一个模态窗口的时候,只有模态窗口可操作,它背后的东西都会被遮罩,从而变得不能操作。
在Extjs中,我们可以通过修改window的配置项来创建模态窗口:
modal: true,
关闭按钮和关闭动作
Extjs Window可以配置是否显示关闭按钮:
closable: false,
在关闭Extjs Window的时候,通过配置项closeAction可以控制按钮是销毁(destroy)还是隐藏(hide),默认情况下为销毁:
closeAction: "hide",
最大化和最小化
Extjs Window的最大化和最小化按钮可以通过配置项显示出来:
maximizable: true, minimizable: true,
效果如图:
id="iframe_0.04328399118341619" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://www.qeefee.com/Upload/wlw/5633644473157130015.png?_=3990424%22%20style=%22border:none;max-width:848px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.04328399118341619',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 518px; height: 335px;">
当我们点击最大化按钮的时候,窗口会变为全屏;
但是,在点击最小化按钮的时候,窗口没有什么操作,这是为什么呢?根据API里面的说法,最小化按钮没有执行任何操作,我们必须处理minimize事件来完成最小化的操作:
listeners: { minimize: function (win, opts) { win.collapse(); } },
通过上面的代码,我们可以在点击最小化按钮的时候,将window折叠起来。
在Extjs Window中显示iframe
在Window中,既可以添加Extjs控件,也可以显示html代码。我们可以通过html配置项来将一个iframe添加到window中:
var win = Ext.create("Ext.window.Window", { id: "myWin", title: "示例窗口", width: 500, height: 300, layout: "fit", autoShow: true, html: '<iframe style="overflow:auto;width:100%; height:100%;" src="http://www.qeefee.com" frameborder="0"></iframe>', });
显示效果如下:
id="iframe_0.4132127945547044" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://www.qeefee.com/Upload/wlw/4903733254922106270.png?_=3990424%22%20style=%22border:none;max-width:848px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.4132127945547044',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 515px; height: 345px;">
在Extjs Window中显示大段HTML
html配置项可以帮助我们在window中显示一段较简单的html代码,如果要显示太复杂的html,写在js代码中显然是有些不利于组织和维护。
那么要显示大段html的时候,我们可以事先将它写在html代码中,然后通过contentEl配置项将它显示在window中。
首先,在html中添加一段代码:
<div id="content"> <h2>欢迎访问起飞网Extjs教程</h2> <p> 更多Extjs教程,请访问<a href="http://www.qeefee.com/zt-extjs">http://www.qeefee.com/zt-extjs</a> </p> </div>
然后,在window中添加配置项:
//创建window var win = Ext.create("Ext.window.Window", { id: "myWin", title: "示例窗口", width: 500, height: 300, layout: "fit", autoShow: true, contentEl: "content" });
显示效果如下:
id="iframe_0.9619963972927912" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://www.qeefee.com/Upload/wlw/5313745129492934472.png?_=3990424%22%20style=%22border:none;max-width:848px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.9619963972927912',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 521px; height: 335px;">
这种方式是先将html元素绘制在body中,然后再将它从body移动到window容器内的,所以可能会引起闪烁的现象。
解决闪烁的办法是先将div隐藏,然后在移动到window后进行显示。Extjs也考虑到了这个问题,并提供了两个css class来解决,分别是:x-hidden和x-hide-display,我们可以将任意一个属css class添加到元素中,问题就会解决了。
如果认为此文对您有帮助,别忘了支持一下哦!