EXT学习笔记4(UI组件window介绍)

最新推荐文章于 2017-08-23 16:45:24 发布

最新推荐文章于 2017-08-23 16:45:24 发布 · 167 阅读

文章标签：

#EXT #UI

ajax 专栏收录该内容

13 篇文章

订阅专栏

本文介绍EXT框架中的window组件，展示了如何创建一个具有表单元素的模态窗口，并提供了具体配置属性及方法示例。

EXT学习时一定要多看EXT中国提供EXT中文API很有帮助。

EXT.window组件的使用：这个组件可以实现一个窗体在页面上呈现并且可以随意拖拽。

常用的配置属性：

title：窗体的标题

layout：布局模式

width：宽

height：高

bodyStyle：窗体样式用于实现文本框和文本框前的标签的布局合理化

例子：

bodyStyle: 'padding:5px 5px 0',

modal:窗体的模态化。为true时页面其他元素被屏蔽

labelWidth：控制窗体上所有的文本框标签宽度

defaultType：窗体的默认子元素

items：一个数组用于在容器上添加别的组件使用

buttons：在窗体上添加按钮，是一个数组

resizable：false时禁止客户改变窗体的大小

plain：true时可以使在窗体上添加的表单的背景色和窗体背景色一致

buttonAlign：窗体上按钮的布局

方法

render：窗体添加到哪里

show：显示一个窗体（窗体实例化后不会马上显示，必须添加到页面上并且要用show方法显示）

hide：隐藏一个窗体

例子：

 Ext.onReady(function(){
                var _window = new Ext.Window({
                    title: "登录",
                    layout: "form",
                    width: 300,
                    height: 200,
                    bodyStyle: 'padding:5px 5px 0',
                    modal: true,
                    labelWidth: 45,
                    defaultType: 'textfield',
                    items: [{
                        fieldLabel: '姓名',
                        blankText: '姓名不能为空',
						allowBlank:false,
                        name: 'username'
                    }, {
                        fieldLabel: '密码',
                        blankText: '密码不能为空',
						allowBlank:false,
                        name: 'password'
                    }],
                    buttons: [{
                        text: "提交",
                        handler: function(){
                            alert("提交");
                        }
                    }, {
                        text: "重置",
                        handler: function(){
                            alert("重置");
                        }
                    }],
                    resizable: false,
                    plain: true,
                    buttonAlign: 'center'
                });
                _window.render(Ext.getBody());
                _window.show();
            });