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();
});
分享到:
相关推荐
这篇学习笔记主要介绍了 Yui_ext 的基础知识,适合对 JavaScript 和 HTML DOM 有一定了解的初学者。 首先,了解 Ext 库的基本概念。Ext 提供了一个强大的框架,用于创建具有丰富用户体验的网页应用,其核心是 ...
### Gwt-ext学习笔记知识点详解 #### 一、GWT与Gwt-ext简介 - **GWT (Google Web Toolkit)**:是由Google开发的一款用于构建高度交互式的Web前端应用的开发框架,它允许开发者使用Java语言编写客户端代码,并通过...
GWT-EXT则是基于GWT之上的一套高级用户界面库,它借鉴了ExtJS的设计理念,提供了更为丰富和强大的UI组件集合,使得开发者能够更加轻松地构建复杂的Web应用程序。 #### 二、CypalStudio工具的安装与配置 **步骤一:...
### ExtJS 学习笔记概览 #### 一、ExtJS 入门 **1.1 ExtJS 构成及如何引用** ExtJS 是一款基于 JavaScript 的开源框架,专为 Web 应用程序的前端界面设计。其核心优势在于提供了一套丰富的 UI 组件和强大的数据...
`Ext.Window`是EXT_JS中的一个核心组件,可以用来创建弹出式窗口。 4. **EXT_JS类库结构**: - **底层API(core)**:这是EXT_JS的基础,包含DOM操作、事件处理、DOM查询等功能,例如`DomHelper.js`和`Element.js`...