`
wang19841229
  • 浏览: 97282 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

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

    博客分类:
  • ajax
阅读更多

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 学习笔记

    这篇学习笔记主要介绍了 Yui_ext 的基础知识,适合对 JavaScript 和 HTML DOM 有一定了解的初学者。 首先,了解 Ext 库的基本概念。Ext 提供了一个强大的框架,用于创建具有丰富用户体验的网页应用,其核心是 ...

    Gwt-ext学习笔记

    ### Gwt-ext学习笔记知识点详解 #### 一、GWT与Gwt-ext简介 - **GWT (Google Web Toolkit)**:是由Google开发的一款用于构建高度交互式的Web前端应用的开发框架,它允许开发者使用Java语言编写客户端代码,并通过...

    (转载)GWT -EXT学习笔记-基础

    GWT-EXT则是基于GWT之上的一套高级用户界面库,它借鉴了ExtJS的设计理念,提供了更为丰富和强大的UI组件集合,使得开发者能够更加轻松地构建复杂的Web应用程序。 #### 二、CypalStudio工具的安装与配置 **步骤一:...

    老师整理的extjs学习笔记

    ### ExtJS 学习笔记概览 #### 一、ExtJS 入门 **1.1 ExtJS 构成及如何引用** ExtJS 是一款基于 JavaScript 的开源框架,专为 Web 应用程序的前端界面设计。其核心优势在于提供了一套丰富的 UI 组件和强大的数据...

    EXT_JS实用开发指南_个人整理笔记.docx

    `Ext.Window`是EXT_JS中的一个核心组件,可以用来创建弹出式窗口。 4. **EXT_JS类库结构**: - **底层API(core)**:这是EXT_JS的基础,包含DOM操作、事件处理、DOM查询等功能,例如`DomHelper.js`和`Element.js`...

Global site tag (gtag.js) - Google Analytics