实用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, //是否模态窗口,默认为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教程100例-006:ExtJS中Window的用法示例的更多相关文章
- 实用ExtJS教程100例-001:开天辟地的Hello World
ExtJS功能繁多,要想彻底的了解确实很困难.作为初学者,如何能找到一条快速的通道呢?我觉得,如果你有Javascript的基础,那就不要惧怕ExtJS的复杂,从动手开始,遇到问题,解决问题,积累经验 ...
- 实用ExtJS教程100例-007:ExtJS中Window组件最小化
在上一节中我们演示了如何使用ExtJS的Window组件,这篇内容中我们来演示一下如何将窗口最小化. 要让ExtJS标题栏中显示最小化按钮并不麻烦,只需要设置 minimizable: true 即可 ...
- 实用ExtJS教程100例-008:使用iframe填充ExtJS Window组件
上面两节中我们分别演示了ExtJS Window的常用功能 和 如何最小化ExtJS Window组件,在这篇内容中我们来演示一下如何使用iframe填充window组件. 思路很简单,首先创建一个w ...
- 实用ExtJS教程100例-003:进度条对话框Ext.MessageBox.progress
在上一篇内容中我们介绍了三种常用的MessageBox提示框,在这篇文章中,我们将演示如何在对话框中使用进度条. 进度条对话框 我们可以使用下面的代码来在MessageBox中显示一个进度条: Ext ...
- 实用ExtJS教程100例-011:ExtJS Form 使用JSON数据赋值和取值
上一节中我们演示了ExtJS Form的异步加载和提交数据,本节中我们将演示如何使用JSON数据为ExtJS Form中的字段赋值和取值. 系列ExtJS教程持续更新中,点击查看>>最新E ...
- 实用ExtJS教程100例-010:ExtJS Form异步加载和提交数据
ExtJS Form 为我们提供了两个方法:load 和 submit,分别用来加载和提交数据,这两个方法都是异步的. 系列ExtJS教程持续更新中,点击查看>>最新ExtJS教程目录 F ...
- 实用ExtJS教程100例-009:ExtJS Form无刷新文件上传
文件上传在Web程序开发中必不可少,ExtJS Form中有一个filefield字段,用来选择文件并上传.今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传. 首先 ...
- 实用ExtJS教程100例-005:自定义对话框Ext.MessageBox.show
我们对ExtJS对话框进行了三篇演示: MessageBox的三种用法 进度条对话框Ext.MessageBox.progress 等待对话框Ext.MessageBox.wait 通过上面三篇内容的 ...
- 实用ExtJS教程100例-004:等待对话框Ext.MessageBox.wait
在前面两节中,我们分别演示了ExtJS三种常用的对话框和ExtJS带有进度条的对话框.在本节内容中,我们来看看ExtJS中的等待对话框. 首先来看一个简单的例子[查看在线示例]: 这种对话框会一直滚动 ...
随机推荐
- MVC底层原理
窥探ASP.Net MVC底层原理 实现跨越Session的分布式TempData 1.问题的引出 我相信大家在项目中都使用过TempData,TempData是一个字典集合,一般用于两个请求之间临时 ...
- P1508 Likecloud-吃、吃、吃 DP
题目背景 问世间,青春期为何物? 答曰:“甲亢,甲亢,再甲亢:挨饿,挨饿,再挨饿!” 题目描述 正处在某一特定时期之中的李大水牛由于消化系统比较发达,最近一直处在饥饿的状态中.某日上课,正当他饿得头昏 ...
- 014 再次整理关于hadoop中yarn的原理及运行
一:对yarn的理解 1.关于yarn的组成 大约分成主要的四个. Resourcemanager,Nodemanager,Applicationmaster,container 2.Resource ...
- 【转】frameset 框架集使用语法,常用语后台。
XHTML 框架概述 框架的使用可以让浏览器“分割”成多个页面显示内容,常用于如网站后台管理这些菜单项目固定,且对美观性和搜索引擎要求不高的地方. 框架的优缺点 框架方便制作栏目导航,操作各栏目时不需 ...
- hdu 3033(好题,分组背包)
I love sneakers! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- POJ.1379.Run Away(模拟退火)
题目链接 POJ输出不能用%lf! mmp从4:30改到6:00,把4:30交的一改输出也过了. 于是就有了两份代码.. //392K 500MS //用两点构成的矩形更新,就不需要管边界了 #inc ...
- httpclient的并发连接问题
昨天的搜索系统又出状况了,几个库同时重建索引变得死慢.经过一个上午的复现分析,确定问题出现httpclient的使用上(我使用的是3.1这个被广泛使用的遗留版本).搜索系统在重建索引时,是并发多个线程 ...
- MikroTik RouterOS 5.x使用HunterTik 2.3.1进行破解
一.加载光驱: 二.一路回车: 三.说明: 1.可以不安装Debian内核,但如果在无缝升级到6.6的版本,此项就一定要选择. 2.6版本的破解必须小于等于1G的空间,不然无法破解成功,亲测有效,如果 ...
- [原创]浅谈H5页面性能测试
[原创]浅谈H5页面性能测试 H5页面我想各位都不陌生,随着移动互联网兴起,不管是App,还是H5都火起来了,最突出的2个表现是ios/android/前端等工程师薪水大涨,尤其是资深前端工程师40W ...
- TIMER门控模式控制PWM输出长度
TIMER门控模式控制PWM输出长度 参照一些网友代码做了些修改,由TIM4来控制TIM2的PWM输出长度, 采用主从的门控模式,即TIM4输出高时候TIM2使能输出 //TIM2 PWM输出,由TI ...