无废话ExtJs 入门教程三[窗体:Window组件]

1.代码如下:

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <!--ExtJs框架开始-->
6 <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>
7 <script type="text/javascript" src="/Ext/ext-all.js"></script>
8 <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" />
9 <!--ExtJs框架结束-->
10 <script type="text/javascript">
11 Ext.onReady(function () {
12 var win = new Ext.Window({
13 title: '窗口',
14 width: 476,
15 height: 374,
16 html: '<div>这里是窗体内容</div>',
17 resizable: true,
18 modal: true,
19 closable: true,
20 maximizable: true,
21 minimizable: true
22 });
23 win.show();
24 });
25 </script>
26 </head>
27 <body>
28 <!--
29 说明:
30 (1)var win = new Ext.Window({}):创建一个新的Window窗体对象。
31 (2)title: '窗口':窗体的标题。
32 (3)width: 476,height: 374:宽度及高度。
33 (4)html: '<div>这里是窗体内容</div>':窗体内部显示的html内容。
34 (5)resizable: true:是否可以调整窗体的大小,这里设置为 true。
35 (6)modal: true:是否为模态窗体[什么是模态窗体?当你打开这个窗体以后,如果不能对其他的窗体进行操作,那么这个窗体就是模态窗体,否则为非模态窗体]。
36 (7)closable:true:是否可以关闭,也可以理解为是否显示关闭按钮。
37 (8)maximizable: true:是否可以最大化,也可以理解为是否显示最大化按钮。
38 (9)minimizable: true:是否可以最小化,也可以理解为是否显示最小化按钮。
39 (10)win.show():窗体展示。
40 -->
41 </body>
42 </html>

2.效果如下:

3.window 组件常用的:属性、方法及事件
一、属性
plain:布尔类型,true表示强制与背景色保持协调,默认值为false。
resizable:布尔类型,用户是否可以调整窗体大小,默认值为true表示可以调整大小。
maxinizable:布尔类型,true表示显示最大化按钮,默认值为false。
maximized:布尔类型,true表示显示窗体时将窗体最大化,默认值为false。
closable:布尔类型,true表示显示关闭按钮,默认值为true。
bodyStyle:与边框的间距,如:bodyStyle:"padding:3px"。
buttonAlign:窗体中button的对齐方式(left、center、right),默认值为right。
closeAction:"close"释放窗体所占内存,"hide"隐藏窗体,建议使用"hide"。
二、方法
show:打开窗体。
hide:隐藏窗体。
close:关闭窗体。
三、事件
show:打开窗体时触法。
hide:隐藏窗体时触法。
close:关闭窗体时触法。
无废话ExtJs 入门教程三[窗体:Window组件]的更多相关文章
- 无废话ExtJs 入门教程七[登陆窗体Demo:Login]
无废话ExtJs 入门教程七[登陆窗体Demo:Login] extjs技术交流,欢迎加群(201926085) 在这节我们通过前几节讲的内容做一个登陆页面,把前几节讲的内容贯穿一下. 1.代码如下: ...
- 无废话ExtJs 入门教程十五[员工信息表Demo:AddUser]
无废话ExtJs 入门教程十五[员工信息表Demo:AddUser] extjs技术交流,欢迎加群(201926085) 前面我们共介绍过10种表单组件,这些组件是我们在开发过程中最经常用到的,所以一 ...
- 无废话ExtJs 入门教程二十一[继承:Extend]
无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承” ...
- 无废话ExtJs 入门教程二十[数据交互:AJAX]
无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
- 无废话ExtJs 入门教程十七[列表:GridPanel]
无废话ExtJs 入门教程十七[列表:GridPanel] extjs技术交流,欢迎加群(201926085) 在Extjs中,GridPanel用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...
- 无废话ExtJs 入门教程十四[文本编辑器:Editor]
无废话ExtJs 入门教程十四[文本编辑器:Editor] extjs技术交流,欢迎加群(201926085) ExtJs自带的编辑器没有图片上传的功能,大部分时候能够满足我们的需要. 但有时候这个功 ...
- 无废话ExtJs 入门教程十三[上传图片:File]
无废话ExtJs 入门教程十三[上传图片:File] extjs技术交流,欢迎加群(201926085) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
- 无废话ExtJs 入门教程十二[下拉列表联动:Combobox_Two]
无废话ExtJs 入门教程十二[下拉列表联动:Combobox_Two] extjs技术交流,欢迎加群(201926085) 不管是几级下拉列表的联动实现本质上都是根据某个下拉列表的变化,去动态加载其 ...
- 无废话ExtJs 入门教程十一[下拉列表:Combobox]
无废话ExtJs 入门教程十一[下拉列表:Combobox] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个下拉列表: 1.代码如下: 1 <!DOCT ...
随机推荐
- Ubuntu+Apache+PHP+Mysql环境搭建
一.操作系统Ubuntu 14.04 64位,虚拟机服务器 二.Apache 1.安装Apache,安装命令:sudo apt-get install apache2 2.环境配置: 1)配置文件:路 ...
- 11.5---含有空字符串的字符串查找(CC150)
注意,1,"" 和 " ".是不同的,空字符串指的是"": 2,注意String的compareTo.小于是指<0.并不是==-1: ...
- 7.2---蚂蚁相遇问题(CC150)
public class Ants { public double antsCollision(int n) { // write code here return (1 - Math.pow(0.5 ...
- 开源中国git使用方法
1.添加公匙. 打开开源中国git公匙管理 用TortoiseGit Puttygen生成公匙文件 生成过程中 不断移动点击鼠标(因为生成密匙过程是记录鼠标变化作为加密过程) ...
- 'ModelOptions' object has no attribute 'get_field_names
peewee安装时随意了点.装了2.8.0的. 倒回到2.6.0就好了. sudo pip uninstall peewee sudo pip install peewee==2.6.0
- django中抽象基类的Foreignkey的定义
class base(models.Model): user = models.ForeignKey(User) class Meta: abstract =True 以上是抽象基类的定义,只有一个公 ...
- php中array_filter的使用
这是今天在做作业的时候遇到的一个问题,不知道大家有没有遇到同样的问题,就是去除数组中不符合我们条件的数据并且保留其键名. 言归正传: array array_filter ( array $input ...
- struts2 结果页面配置
<result>标签: * 属性: * name:逻辑视图的名称 * type:结果页面类型. * dispatcher :转发.默认值. * redirect ...
- 【python】python新手必碰到的问题---encode与decode,中文乱码[转]
转自:http://blog.csdn.net/a921800467b/article/details/8579510 为什么会报错“UnicodeEncodeError:'ascii' codec ...
- Xcode 6.3.2 提交APP(Upload Archive)时崩溃的解决办法
最近在上传为客户做的APP时,发现Xcode总会在进行到Upload Archive这一步时崩溃,导致APP上载不了.下面说说网上搜索到的几种解决办法. 方法一 亲测有效,很简单: 1.重新打开Xco ...