Extjs Window用法详解
2016-04-14 09:10
711 查看
转自:http://www.qeefee.com/article/extjs-window-in-detail
天我们来介绍一下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教程
代码中的Form可以参考《Extjs Form用法详解》。显示效果如下:
如果要它显示出来,我们可以通过在配置项中添加autoShow来实现,代码如下:
或者,我们可以显示的调用window的show方法:
在Extjs中,我们可以通过修改window的配置项来创建模态窗口:
在关闭Extjs Window的时候,通过配置项closeAction可以控制按钮是销毁(destroy)还是隐藏(hide),默认情况下为销毁:
效果如图:
当我们点击最大化按钮的时候,窗口会变为全屏;
但是,在点击最小化按钮的时候,窗口没有什么操作,这是为什么呢?根据API里面的说法,最小化按钮没有执行任何操作,我们必须处理minimize事件来完成最小化的操作:
通过上面的代码,我们可以在点击最小化按钮的时候,将window折叠起来。
显示效果如下:
那么要显示大段html的时候,我们可以事先将它写在html代码中,然后通过contentEl配置项将它显示在window中。
首先,在html中添加一段代码:
然后,在window中添加配置项:
显示效果如下:
这种方式是先将html元素绘制在body中,然后再将它从body移动到window容器内的,所以可能会引起闪烁的现象。
解决闪烁的办法是先将div隐藏,然后在移动到window后进行显示。Extjs也考虑到了这个问题,并提供了两个css class来解决,分别是:x-hidden和x-hide-display,我们可以将任意一个属css class添加到元素中,问题就会解决了。
天我们来介绍一下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用法详解》。显示效果如下:
显示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,
效果如图:
当我们点击最大化按钮的时候,窗口会变为全屏;
但是,在点击最小化按钮的时候,窗口没有什么操作,这是为什么呢?根据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>', });
显示效果如下:
在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" });
显示效果如下:
这种方式是先将html元素绘制在body中,然后再将它从body移动到window容器内的,所以可能会引起闪烁的现象。
解决闪烁的办法是先将div隐藏,然后在移动到window后进行显示。Extjs也考虑到了这个问题,并提供了两个css class来解决,分别是:x-hidden和x-hide-display,我们可以将任意一个属css class添加到元素中,问题就会解决了。
相关文章推荐
- 问题:iis配置json;结果:如何配置iis支持.json格式的文件
- js实现div居中
- Extjs GridPanel用法详解
- JavaScript 开发者经常忽略或误用的七个基础知识点
- JS创建新元素组与删除当前元素组
- js渲染引擎 tempo.js
- Javascript闭包(Closure)
- JavaScript 移动和触摸框架
- 实例分析JavaScript中的事件委托和事件绑定
- js数组去重
- JavaScript浅析闭包和内存泄露的问题
- [RxJS] Creation operators: empty, never, throw
- 《ECMAScript6入门》整理(上)
- [RxJS] Creation operators: from, fromArray, fromPromise
- 用JS添加文本框案例代码
- 实例解析JSP中EL表达式的各种运用
- 使用JSP制作一个超简单的网页计算器的实例分享
- JSP中一些JSTL核心标签用法总结
- JSP中常用的JSTL fmt(format格式化)标签用法整理
- 实例讲解JSP获取ResultSet结果集中的数据的方法