您的位置：首页 > Web前端 > JavaScript

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

2016-04-21 08:58 537 查看

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

extjs技术交流，欢迎加群（201926085)
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系列教程

好文要顶
关注我
收藏该文联系我

李林峰的园子
关注 - 37
粉丝 - 1827

+加关注

16
0

(请您对文章做出评价)

«
上一篇：无废话ExtJs 入门教程二[Hello World]
»
下一篇：无废话ExtJs 入门教程四[表单：FormPanel]

posted on 2012-06-18 15:25
李林峰的园子阅读(28011) 评论(6)

编辑
收藏

发表评论


#1楼
2012-06-24 16:09 |
牛腩

代码简单明了，i like it...
支持(0)反对(0) http://pic.cnblogs.com/face/http://pic.cnblogs.com/face/u41249.jpg

#2楼
2012-06-30 23:18 |
牛腩

坚持学习。。。
http://test.oncecode.com/q164423073/www/
支持(0)反对(0) http://pic.cnblogs.com/face/http://pic.cnblogs.com/face/u41249.jpg

#3楼
2012-07-02 13:37 |
捡到幸福的小猪

IE9中出现这样的错误: 对象不支持“addEvents”属性或方法

这个怎么解决？？？？
支持(0)反对(0) http://pic.cnblogs.com/face/http://pic.cnblogs.com/face/u70930.jpg

#4楼[楼主]
2012-07-02 20:05 |
李林峰的园子

@ 捡到幸福的小猪

这个还真不知道，ext对浏览器兼容是有要求的。

网上有如下解决方案，<meta http-equiv="X-UA-Compatible" content="IE=8" />，我没测试，你试下吧，不行的话没那办法了。
支持(0)反对(0) http://pic.cnblogs.com/face/http://pic.cnblogs.com/face/u414533.gif?id=31160526

#5楼
2014-11-04 20:06 |
Veer-273°

简单实用，利于理解！
支持(0)反对(0)


#6楼32626182015/9/8
16:52:31 2015-09-08 16:52 |
haha123@

minimizable: true这个属性在edge浏览器下面没有用

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航