实用ExtJS教程100例-006:ExtJS中Window的用法示例
在前面几个示例中,我们演示了MessageBox的各种用法,今天这篇文章将演示如何使用Window。
我们首先来创建一个窗口:
var win = Ext.create("Ext.window.Window", {title: "标题 - www.qeefee.com", //标题height: 200, //高度width: 400, //宽度layout: "fit", //窗口布局类型modal: true, //是否模态窗口,默认为falsehtml: "<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教程网站起飞网上面,如果转载请保留本段声明,谢谢合作。
如果认为此文对您有帮助,别忘了支持一下哦!
实用ExtJS教程100例-006:ExtJS中Window的用法示例相关推荐
- mysql教程or怎么用_MySQL中or语句用法示例
1.mysql中or语法的使用,在mysql语法中or使用注意点. 项目遇到坑,遍历发放奖励数据查询错误!!! $sql = 'SELECT * FROM `vvt_spread_doubleegg_ ...
- 实用ExtJS教程100例-004:等待对话框Ext.MessageBox.wait
在前面两节中,我们分别演示了ExtJS三种常用的对话框和ExtJS带有进度条的对话框.在本节内容中,我们来看看ExtJS中的等待对话框. 首先来看一个简单的例子[查看在线示例]: 这种对话框会一直滚动 ...
- 实用ExtJS教程100例-002:MessageBox的三种用法
在上一节中,我们用到了MessageBox,在本文中,我们将介绍一下ExtJS中常用的三种MessageBox. Ext.MessageBox.alert() 这个方法用来打开一个普通的对话框,对话框 ...
- 实用ExtJS教程100例-009:ExtJS Form无刷新文件上传
文件上传在Web程序开发中必不可少,ExtJS Form中有一个filefield字段,用来选择文件并上传.今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传. 首先 ...
- sql语句中的in用法示例_PHP中的循环语句和示例
sql语句中的in用法示例 循环 (Loops) Imagine that we need a program that says "hello world" 100 times. ...
- JavaScript中window.open用法实例详解
本文较为详细的分析了JavaScript中window.open用法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <script LANGUAGE="javascript& ...
- sql语句中的in用法示例_示例中JavaScript in操作符
sql语句中的in用法示例 One of the first topics you'll come across when learning JavaScript (or any other prog ...
- mysql or_MySQL中or语句用法示例
1.mysql中or语法的使用,在mysql语法中or使用注意点. 项目遇到坑,遍历发放奖励数据查询错误!!! $sql = 'SELECT * FROM `vvt_spread_doubleegg_ ...
- mysql数据库 or的用法_MySQL中or语句用法示例
1.mysql中or语法的使用,在mysql语法中or使用注意点. 项目遇到坑,遍历发放奖励数据查询错误!!! $sql = 'SELECT * FROM `vvt_spread_doubleegg_ ...
最新文章
- ACL 2018最佳论文公布!计算语言学最前沿研究都在这里了
- <关于并发框架>Java原生线程池原理及Guava与之的补充
- 让IDA Pro输出能让gcc编译器直接编译的.s汇编文件
- 12.16直播:藏在华为物联网操作系统里的“秘密”
- JS_高程3.基本概念(2)
- 最新百度翻译接口JS逆向教程
- 自定义UICollectionViewFlowLayout
- java删除文件目录及文件_Java删除文件,目录
- Cognos 11.0快速开发指南 Ⅱ
- Spring boot 整合WebSocket
- 服务器传奇网站搭建修改教程,传奇架设教程如何修改爆率
- 如何清理占用计算机内存,win7系统清理电脑内存的操作方法
- 硬盘三大种类( SSD ; HHD ; HDD )
- Ubuntu16.04下cuda9.0+cudnn7.0安装指南
- 微信小程序云开发初步上手
- 实现FTP服务器免登陆下载PDF文件转base64在下载到本地|服务器
- bzoj3786星系探索(splay维护dfs序)
- 软件著作权人享有的权利有哪些
- 开放智能公司捐助180套嵌入式ARM套件助力南科大C/C++课程教学
- 计算机设计原理教学反思,教学反思——我是电脑小医生
热门文章
- Windows 下安装 Redis
- /bin/bash: jar: command not found
- php权限二进制,PHP_二进制交叉权限微型php类分享,靓点:1、多对多交叉场景分配 - phpStudy...
- python导入模块的变量_python 环境变量和import模块导入方法(详解)
- 2020-12-11 Python yield 使用浅析
- 2020-12-03 Python OpenCV: 图片的裁剪
- java要从数据查出五百多万条数据_100w条数据 | 插入Mysql你要用多长时间?
- matlab三角定位分析程序,Matlab chi2gof 分布分析程序求教
- 面试题整理18 根据上排给出十个数,在其下排填出对应的十个数
- 1—YOLO2:环境搭建