实用ExtJS教程100例-006:ExtJS中Window的用法示例
2013-12-09 17:37
337 查看
在前面几个示例中,我们演示了MessageBox的各种用法,今天这篇文章将演示如何使用Window。
我们首先来创建一个窗口:
窗口的截图如下(查看在线示例):
在ExtJS 4.x中,我们推荐使用Ext.create()方法来创建对象。这个方法的第一个参数是类名,第二个参数的创建对象时用到的配置项。
在上面的示例中,我已经将配置项加了备注,不在详细的说明。
接下来看一个比较复杂的窗口
程序运行截图如下(查看在线示例):
这个窗口有最大化和关闭按钮,并且包含了工具栏和按钮项,更像是我们在实际开发中使用的。
在这段代码中,我们首先定义了一个全局的窗口,并在界面上放了三个按钮呢,分别绑定显示、隐藏和关闭窗口的方法。
当我们点击关闭窗口按钮以后,再回过头来点击显示窗口时会发现没有反应,打开控制台则能看到脚本错误:
这是因为close的时候窗口资源已经被释放了的原因(查看在线示例)。
本文还发布在了ExtJS教程网站起飞网上面,如果转载请保留本段声明,谢谢合作。
我们首先来创建一个窗口:
var win = Ext.create("Ext.window.Window", { title: "标题 - www.qeefee.com", //标题 height: 200, //高度 width: 400, //宽度 layout: "fit", //窗口布局类型 modal: true, //是否模态窗口,默认为false html: "<h2>你打开了一个窗口</h2>" //窗口的html代码 }); win.show(); //显示窗口
窗口的截图如下(查看在线示例):
在ExtJS 4.x中,我们推荐使用Ext.create()方法来创建对象。这个方法的第一个参数是类名,第二个参数的创建对象时用到的配置项。
在上面的示例中,我已经将配置项加了备注,不在详细的说明。
接下来看一个比较复杂的窗口
var win = Ext.create("Ext.window.Window", { title: "标题 - www.qeefee.com", height: 300, width: 400, layout: "fit", modal: true, resizable: false, maximizable: true, minimizable: false, closable: true, tbar: [ { text: "保存", iconCls: "qicon-save" }, { text: "新建", iconCls: "qicon-add" } ], buttons: [ { text: "确定", iconCls: "qicon-accept" }, { text: "取消", iconCls: "qicon-delete" }, ], items: [] }); win.show();
程序运行截图如下(查看在线示例):
这个窗口有最大化和关闭按钮,并且包含了工具栏和按钮项,更像是我们在实际开发中使用的。
关闭窗口
窗口的关闭有两种方法,一种是close,一中是hide,从名字中就可以看出,前一个是真的关闭窗口并释放窗口资源,而hide则是将窗口隐藏了。var g_win = Ext.create("Ext.window.Window", { title: "标题 - www.qeefee.com", height: 200, width: 400, layout: "fit", modal: false, html: "<h2>你打开了一个窗口</h2>" }); Ext.get("btn3").on("click", function () { g_win.show(); //显示窗口 }); Ext.get("btn4").on("click", function () { g_win.hide(); //隐藏窗口 }); Ext.get("btn5").on("click", function () { g_win.close(); //关闭窗口(窗口关闭的时候将释放窗口资源) });
在这段代码中,我们首先定义了一个全局的窗口,并在界面上放了三个按钮呢,分别绑定显示、隐藏和关闭窗口的方法。
当我们点击关闭窗口按钮以后,再回过头来点击显示窗口时会发现没有反应,打开控制台则能看到脚本错误:
这是因为close的时候窗口资源已经被释放了的原因(查看在线示例)。
本文还发布在了ExtJS教程网站起飞网上面,如果转载请保留本段声明,谢谢合作。
相关文章推荐
- Js常用技巧
- JS操作iframe
- extjs grid里面添加右键菜单
- extjs的选择模型
- JavaScript数组去重方法整理
- JavaScript正则表达式
- JSP和Servlet的中文乱码处理
- ExtJS的拖拽效果示例
- JSP和Servlet的中文乱码处理
- 用Javascript获取页面元素的具体位置
- 十天学会servlet和jsp
- JS判断选择的时间是否大于当前时间
- JavaScript―window对象使用示例
- 利用JS代码判断是否手机访问()
- 使用js实现按钮控制文本框加1减1应用于小时+分钟
- yaml to json 批量 以及 单个
- ExtJS项目使用技巧———滚动条
- 移动终端学习2:触屏原生js事件及重力感应
- (译) 《Javascript 24条最佳实践》
- JSF 入门