ExtJs学习笔记之Window组件
2018-02-08 10:51
387 查看
Window窗体组件
window是一个指定的打算作为一个应用程序窗口的面板,默认窗口是浮动的,resizable, 并且draggable,默认的,窗体靠document.body呈现。1、示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="../ext-js-4.2.1/resources/css/ext-all.css" /> <script type="text/javascript" src="../ext-js-4.2.1/ext-all.js"></script> <script type="text/javascript" src="../ext-js-4.2.1/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function() { var win = new Ext.Window({ title : '窗体window', width : 500, height : 200, html : '<div>这里是窗体的内容</div>', resizable : true, modal : true, closable : true, maximizable : true, minimizable : true }); win.show(); }); </script> </head> <body> <!-- 说明: (1)var win = new Ext.Window({}):创建一个新的Window窗体对象。 (2)title: '窗口':窗体的标题。 (3)width: 500,height: 200:宽度及高度。 (4)html: '<div>这里是窗体内容</div>':窗体内部显示的html内容。 (5)resizable: true:是否可以调整窗体的大小,这里设置为 true。 (6)modal: true:是否为模态窗体[什么是模态窗体?当你打开这个窗体以后,如果不能对其他的窗体进行操作,那么这个窗体就是模态窗体,否则为非模态窗体]。 (7)closable:true:是否可以关闭,也可以理解为是否显示关闭按钮。 (8)maximizable: true:是否可以最大化,也可以理解为是否显示最大化按钮。 (9)minimizable: true:是否可以最小化,也可以理解为是否显示最小化按钮。 (10)win.show():窗体展示。 (11)draggable : true:是否可以拖动窗体,false代表不可拖动,默认为true。
--> </body> </html>
2、效果图:
3、属性及常用方法:
(1) 属性:
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"。
(2) 方法:
show:打开窗体时触法。
hide:隐藏窗体时触法。
close:关闭窗体时触法。
相关文章推荐
- ExtJs学习笔记之ComboBox组件
- 【ExtJs学习笔记】5.组件和容器
- EXTJS学习笔记:类似于Window的登录窗体
- ExtJS:学习笔记五:window窗口-登陆
- ExtJs 学习笔记基础篇 Ext组件的使用第1/2页
- ExtJs 学习笔记基础篇 Ext组件的使用第1/2页
- EXTJS 窗口Ext.Window()学习笔记
- ExtJs学习笔记(10)_Window的基本用法
- ExtJs学习笔记(10)_Window窗口的Border布局
- ExtJS学习笔记三:简单组件
- ExtJS学习之路第八步:Window组件
- ExtJS学习笔记(十二) Ext 获取组件、获取DOM
- extjs学习笔记----按钮和日期组件
- ExtJS学习之路第八步:Window组件
- ExtJs组件学习笔记
- ExtJS学习笔记(五) window与panel篇
- ExtJS 学习笔记 示例2-在组件中添加子组件,并操作子组件
- ExtJs学习笔记之window
- ExtJs学习笔记之Button组件
- ExtJS学习笔记六:按钮获取window中的文本域