Ext常用组件

视频课：https://edu.csdn.net/course/play/7621

表单是客户端和服务器交互的一种重要方式，Ext表单控件在界面体验效果的美观度及功能的全面性上都有着首屈一指的影响力，表面上，表单控件只是添加了一些 CSS样式，但它在数据校验方面非常灵活。

实际上，Ext提供的功能远不止这些，它还可以使不同的消息对话框更加美观、容易配置、拖动等，这都是传统的页面方式无法比拟的。

此外，Ext的树形结构是Ext框架的重要组成部分，可以动态添加、删除或修改节点，实现拖拽和右键菜单等功能，而且其界面和动画十分美观。本章将分别从Ext的消息对话框、表单控件以及Ext树形结构开始，详细讲解Ext常用控件。

核心技能部分

1.1 Ext消息对话框

传统方法 （alert、confirm等）产生的对话框非常呆板，对界面的体验效果产生了负面影响。ExtJS 提供了一套非常漂亮的对话框，可以实现华丽的应用程序界面。

1.1.1 Ext.MessageBox介绍

Ext中的 MessageBox是一种特殊的窗口，配置简单，可以任意拖动、摆放，也可以实现对任何控件的使用。Ext.MessageBox 是一个用于产生不同风格提示框的实体类，它的另一种写法是 Ext.Msg。与传统浏览器的 alert 提示不同，Ext.MessageBox是异步的，在显示一个 Ext.MessageBox时并不会停止代码的运行。因此，代码需要获得用户反馈后再运行时，必须使用回调函数。Ext.MessageBox为程序员提供了弹出提示框的简单方法，使用它提供的 alert、confirm、prompt等对话框完全可以替代传统的同类对话框。此外，Ext.MessageBox还提供了进度条等功能。

1.1.2 Ext. MessageBox. alert()

Ext.MessageBox.alert（）一般包含 title、msg 和 function 这 3 个参数。其中，title 指窗口的标题，msg 指窗口的内容，function 指点击关闭按钮后执行的函数。

Alert(title，msg，function(){} )

1.2 Ext表单控件

表面上，Ext表单控件只是修改了 CSS 样式，但在漂亮的界面下隐藏的仍然是input控件。表单除了前面的功能外还需要数据校验、数据校验失败的提示等，这些功能在传统的表单控件中没有良好的处理方式。在Ext 中，可以通过表单和对应的输入控件，轻易地校验数据，并在校验失败后给予提示，为用户提供良好的交互体验。

1.2.1 Ext表单

使用表单控件，制作简单的Ext表单。

上述代码使用 marklnvalid（）函数显示 field 的错误信息样式。其中，msgTarget分别设置为 qtip 和title。运行程序

2. 文本输入控件 Ext.form.TextField

Ext.form.TextField继承 自 Ext.form.Field，是专用于输人文本的输入控件。除了 Field 的功能外，此控件最主要的特性是检查输入框数据是否为空以及数据的最大、最小长度。添加 TextField功能，代码如下：

var field3 = new Ext.form.TextField({

fieldLabel: 'tel',

allowBlank: false,

emptyText: 'empty',

maxLength: 16,

minLength: 8,

msgTarget: 'title'

});

3. 多文本输入控件 Ext.form.TextArea

Ext.form.TextArea与Ext.formiTextField都是用于输人文本的输入控件，但是，TextArea可以输入多行文本。

var field4 = new Ext.form.TextArea({

width: 122,

grow: true,

preventScrollbars:true,

fieldLabel: '备注',

emptyText: '请输入备注信息',

maxLength: 100,

minLength: 10

});

var form = new Ext.form.FormPanel( {

defaultType: 'textfield',

title:'form',

buttonAlign: 'center',

frame:true,

width: 320,

items: [field1,field2,field3,field4],

buttons:[{text: '提交'}]

} );

4. 日期输入控件 Ext.form.DateField

Ext.form.DateField 是常用的日期选择控件。除了选择日期功能外，此控件还支持 Ext.form.TextField和 Ext.form.Field 中定义的功能。

var field5 = new Ext.form.DateField({

fieldLabel: '出生日期',

allowBlank: false,

emptyText: '请输入出生日期',

format: 'Y-m-d',

disabledDays:[0,6]

});

5. 时间输入控件 Ext.form.TimeField

使用日期控件后，有时应用程序还需要精确到日期的具体时间。Ext.form.TimeField是用于选择时间的输入控件，它可以通过指定一天的开始时间、结束时间以及时间间隔选择时间。

var field6 = new Ext.form.TimeField({

fieldLabel: '时间',

emptyText: '请选择',

minValue: '1:00 AM',

maxValue: '23:00 PM',

increment:60

});

6. 在线编辑器控件 Ext.form.HtmlEditor

HTML 中包含许多在线编辑器，但其使用较复杂。Ext提供了简单的在线编辑器控件 Ext.form.HtmlEditor，可以对文本进行各项设置。

var field7 = new Ext.form.HtmlEditor( {

fieldLabel: '自我介绍',

anableAlignments:true,

enableColors:true,

enableFont: true,

enableFontSize: true,

enableLinks: true,

enableFormat: true,

enableLists: true,

enableSourceEdit: true,

autoHeight: 'auto',

anchor: '90%'

});

由以上代码可知，可以通过相应的enable选项启用或禁用来设置各种功能

7. 隐藏域控件 Ext.form.Hidden

在实际应用中，修改记录信息时，信息 ID 一般不显示给用户，但该 ID 需要在页面使用时，一般必须隐藏 ID 值。在Ext 中，可以使用隐藏域控件 Ext.form.Hidden 来隐藏不需要呈现给用户的信息，该控件直接继承自 Ext.form.Field，通过Hidden的 setValue（）和 getValue（）函数赋值和取值，且值不显示在页面上。

var field8 = new Ext.form.Hidden({

fieldLabel: 'empId'

});

field8.setValue('0003');

var empId = field8.getValue();

运行上述代码，页面中将产生隐藏域 empId=0003。

1.2.3 表单提交

表单最重要的功能就是向后台提交数据，下面通过一个注册功能演示Ext表单提交，Ext代码如下所示。

Ext.onReady(function() {

var form = new Ext.form.FormPanel( {

title : '用户登陆',

bodyStyle : 'padding:15px',

frame : true,

layout : 'form',

width : 350,

defaultType : 'textfield',

defaults : {

width : 230

},

labelAlign : 'right',

buttonAlign : 'center',

labelWidth : 65,

labelPad : 13,

url:'login_action.jsp',

items : [ {

fieldLabel : '账号',

name : 'name',

allowBlank : false

}, {

fieldLabel : '密码',

inputType : 'password',

name : 'password'

} ],

buttons : [ {

text : '提交',

listeners:{

click:function(){

form.getForm().submit({

success:function(f,a){

Ext.Msg.alert("提示",a.result.msg);

},

failure:function(f,a){

Ext.Msg.alert("提示",a.result.msg);

}

});

}

}

}, {

text : '取消'

} ]

});

form.render("form");

});

上面代码中，为了提交数据，要为form设置一个url参数，表示表单数据提交到该路径。记得要给TextField加上一个name属性，这样后台程序才可以通过这个属性值获取提交的值。最后看Ext的按钮，在【提交】按钮上，使用listeners配置项处理事件，值是一个JSON对象，该JSON对象的属性是事件名称，值是事件处理函数。在本例中当点击按钮后，获取FormPanel包含的BasicForm对象，然后再调用submit()函数即可完成提交。

在本例中的提交到的后台程序login_action.jsp代码如下所示。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%

String name = request.getParameter("name");

String password = request.getParameter("password");

if("admin".equals(name)&&"admin".equals(password)){

out.print("{success:true,msg:'登陆成功，正在转向主页面'}");

} else {

out.print("{success:false,msg:'登陆失败，请检查账号和密码'}");

}

%>

上面代码用来处理登陆请求，首先得到提交的账号和密码，如果都是admin时登陆成功，此时响应一个JSON对象“{success:true,msg:'登陆成功，正在转向主页面'}”，其它情况登陆失败，此时响应一个JSON对象“{success:false,msg:'登陆失败，请检查账号和密码'}”，Ext控件就会根据这个对象的success属性的值来确定是成功或者失败。

如果账号和密码都输入admin运行结果如图3.1.17所示

1.3 Ext树控件

在应用程序中，经常需要显示或处理树状结构的对象信息，如部门信息、地区信息、菜单信息操作系统中的文件夹信息等。

传统的 HTML页面显示树比较因难，需要编写大量的 JavaScript代码。而且基于Ajax异步加载的树不但涉及Ajax数据加载及处理技术，还需要考虑跨浏览器支持等，处理过程繁琐。ExtJS中提供了树控件，可以在B/S应用中快速开发包含树结构信息的应用。

1.3.1 基本树结构

树控件由 Ext.tree.TreePanel类定义，TreePanel类继承自 Panel面板。简单的树代码如下：

2：使用Ext实现注册界面

训练技能点

Ø Ext表单控件

需求说明

使用Ext表单控件实现注册页面，效果如图3.2.2所示。

图3.2.2 注册界面

实现步骤

(1) 使用FormPanel作为界面容器

(2) 在FormPanel容器中添加其它控件

参考代码

Ext.onReady(function() {

Ext.QuickTips.init();

var form = new Ext.form.FormPanel( {

labelAlign : 'right',

labelWidth : 50,

buttonAlign : 'center',

width : 450,

autoHeight : true,

title : 'form',

frame : true,

defaults : {

width : 300

},

defaultType : 'textfield',

items : [ {

fieldLabel : '账号',

name : 'name'

}, {

fieldLabel : '密码',

inputType : 'password',

name : 'password'

}, {

xtype : 'numberfield',

fieldLabel : '年龄',

name : 'age'

}, {

xtype : "combo",

fieldLabel : '性别',

hiddenName:'sex',

store : new Ext.data.SimpleStore( {

fields : [ 'value', 'text' ],

data : [ [ 'M', '男' ], [ 'F', '女' ] ]

}),

displayField : 'text',

valueField : 'value',

mode : 'local',

emptyText : '请选择'

}, {

xtype : 'datefield',

fieldLabel : '生日',

format:'Y-m-d',

name : 'birthday'

}, {

xtype : 'textarea',

fieldLabel : '简介',

name : 'controduce'

} ],

buttons : [ {

text : '注册',

listeners:{

click:function(){

form.getForm().submit({

});

}

}

}, {

text : '取消'

} ]

});

form.render("form");

});

3：使用Ext实现注册功能

训练技能点

Ø Ext表单控件

需求说明

在任务2的基础上完成注册功能，当用户点击【注册】按钮后，提交到后台程序并保存到数据库，保存成功或失败给出提示，效果如图3.2.3所示。

图3.2.3 注册功能

实现步骤

(1) 使用FormPanel的url属性指定提交路径。

(2) 处理【注册】按钮点击事件，当点击后提交请求到后台处理程序完成注册。

参考代码

核心代码如下所示。

buttons : [ {

text : '注册',

listeners:{

click:function(){

form.getForm().submit({

success:function(f,a){

Ext.Msg.alert("提示",a.result.msg);

},

failure:function(f,a){

Ext.Msg.alert("提示",a.result.msg);

}

});

}

}

}, {

text : '取消'

} ]

4：使用Ext实现树结构

训练技能点

Ø Ext树控件

需求说明

实现一个管理系统的树结构，效果如图3.2.4所示。

图3.2.4 管理系统树结构

实现步骤

(1) 使用TreePanel作为容器。

(2) 向容器中添加树节点。

参考代码

核心代码如下所示。

Ext.onReady(function() {

var tree = new Ext.tree.TreePanel( {

collapsible : true,

title : '管理菜单',

width : 200,

autoScroll : true,

split : true,

loader : new Ext.tree.TreeLoader(),

root : new Ext.tree.AsyncTreeNode( {

text : '系统管理',

expanded : true,

icon : 'img/13.png',

children : [ {

text : '用户管理',

icon : 'img/users.png',

children : [ {

text : '用户角色',

icon : 'img/user.png',

leaf : true

}, {

text : '用户权限',

icon : 'img/usericon.png',

leaf : true

} ]

}, {

text : '客户管理',

icon : 'img/60.png',

children : [ {

text : '客户维护',

icon : 'img/61.png',

leaf : true

}, {

text : '客户关系',

icon : 'img/62.png',

leaf : true

} ]

},{

text : '系统设置',

icon : 'img/90.png',

children : [ {

text : '字典设置',

icon : 'img/91.png',

leaf : true

}, {

text : '数据清除',

icon : 'img/92.png',

leaf : true

} ]

}]

})

});

tree.render("tree");

tree.expandAll();

});

巩固练习部分

一、选择题

1、 进度条一般不直接关闭，通常情况下可以使用 （ ）隐藏对话框的关闭按钮。

A. closable：false

B. closable：true

C. progress：false

D. progress：true

2. “Ext.MessageBox.confirm（"title"，"msg"，function（e）{alert（e）；}）；”中 function 的参数e是 （   ）

A. 点击的弹出框的按钮的值

B. 点击的弹出框的标题的值

C. 点击的弹出框的内容的值

D. 点击的弹出框的关闭按钮的值

3. 使用 Ext 的 （   ），可以替代传统的 alert、confirm等方法产生的对话框。

A. Ext. MessageBox

B. Ext. form

C. Ext. tree

D. Ext. Gird

4. Ext 中提供制作进度条的是 （   ）

A. Ext.MessageBox. alert（）

B. Ext.MessageBox. con finn（）

C. Ext.MessageBox. prompt（）

D. Ext.MessageBox.show（）

5. 在默认情况下，表单验证的输入控件会监听blur事件，如果数据验证失败，则根据msgTarget的设置显示错误消息。通常，msgTarget可以被设置为 （   ）

A. qtip

B. title

C. side

D. under

二、简答题

Ext.form.Field定义的输入控件包含哪些通用的属性和功能函数？

三、操作题

使用 Ext JS表单控件制作论坛中用户的注册页面，在用户提交注册信息时使用进度条。

Python

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。