EXT表单的应用3
关键字: 表单的应用3
引自http://winsonet.cnblogs.com/
一、美化表单:
ExtJS自带的CSS效果可以让表单非常漂亮,在使用前先将ext-all.css文件导入页面,然后加入以下代码
<div class="x-box-ml">
<div class="x-box-mr">
<div class="x-box-mc">
<form id="regform">
<fieldset align="middle">
<legend><font class="btitle" color="#ff7300"><strong class="style7">帐号信息strong>font>legend>
<table width="100%" align="center">
<tr>
<td style="text-align: right">
会员Email:
td>
<td style="text-align: left" width="300">
<input type="text" id="UserEmail" name="UserEmail" /> <span id="msg" style="display: none">span>
td>
tr>
<tr>
<td style="text-align: right">
登录密码:
td>
<td style="text-align: left">
<input id="UserPwd" name="UserPwd" type="password" />
td>
tr>
<tr>
<td style="text-align: right">
密码确认:
td>
<td style="text-align: left">
<input id="UserPwd1" name="UserPwd1" type="password" />
td>
tr>
table>
fieldset>
<div id="regbutton">
div>
form>
div>
div>
div>
<div class="x-box-bl">
<div class="x-box-br">
<div class="x-box-bc">
div>
div>
div>
二、绑定及验证表单:
以上只是将表单显示出来了,如需对表单域操作,还需要在JS里写相关的代码进行绑定
var fm2 = new Ext.form.BasicForm('regform');
//加入验证框
fm2.add(new Ext.form.TextField({
allowBlank: false,//不能为空
blankText:'EMAIL不能为空,且请确保有效地址!',
//regex:re,//正则验证
invalidText:'EMAIL格式不正确或此EMAIL已被注册!',
validator:checkEmail//自定义验证函数
}).applyTo(userEmail));
fm2.add(new Ext.form.TextField({
allowBlank: false,//不能为空
blankText:'密码不能为空!'
}).applyTo(Ext.get('UserPwd')));
fm2.add(new Ext.form.TextField({
allowBlank: false,//不能为空
blankText:'密码不能为空!',
invalidText:'2次密码不相同!',
validator:vailda//自定义验证函数
}).applyTo(Ext.get('UserPwd1')));
fm2.add(new Ext.form.TextField({
allowBlank: false,//不能为空
blankText:'会员名称不能为空!'
}).applyTo('CustomerName'));
ExtJS能对表单进行非常灵活的验证,上面是将表单的字段绑定起来,同时添加了相应的验证,并且也支持自定义函数验证,以下是对比2个输入框密码是否相同的自定义函数
/**//**
* 验证密码是否相同
*/
function vailda()
{
if(Ext.get('UserPwd').dom.value==Ext.get('UserPwd1').dom.value)
return true;
else
return false;
}
如果想让效果更好,还要在绑定代码里加多一句
Ext.QuickTips.init();
加入此代码后,表单验证的错误消息会在鼠标放到相应字段时显示出来
三、表单提交:
先将提交按钮进行注册,然后再对此按钮进行操作
//注册按钮
Ext.get('regform').un("submit", fm2.onSubmit, fm2);
var regButton = new Ext.Button('regbutton', {
text: ' 注 册 ',
handler: function(){
if (fm2.isValid()) {
Ext.Msg.show({
title:'再确认一下',
modal : false,
msg: '您确定资料正确吗?',
buttons: Ext.Msg.OKCANCEL,
fn: function(btn, text){
if (btn == 'ok'){
fm2.submit({
url: 'Register.htm',
params: {
oper: 'submit'
},
msgethod: 'POST',
waitMsg:'正在提交,请稍等'
});
}
},
animEl: 'regbutton'
}).getDialog().moveTo(200, 100);
} else {
Ext.Msg.show({
title:'信息',
msg: '请填写完整后再提交!',
modal : false,
buttons: Ext.Msg.OK
}).getDialog().moveTo(200, 100);
}
}
});
分享到:
相关推荐
EXT表单,是一种基于JavaScript和Ajax技术的富客户端(Rich Client)表单处理技术,它源自EXT JS库,专门用于构建交互性强、用户体验优秀的Web应用程序。EXT JS是一个强大的JavaScript库,提供了一系列组件化的UI...
10. **实际应用**:在实际项目中,EXT表单验证常用于注册、登录、修改个人信息等场景,确保用户输入的数据符合业务逻辑要求。 通过阅读如"EXT 表单验证_journeylin_新浪博客.html"、"ExtJS中表单验证使用自定义...
EXT表单设计器是一款基于EXT库的强大工具,专用于快速、高效地构建Web应用程序中的表单。EXT是一个流行的JavaScript框架,由Sencha公司开发,用于构建富客户端应用。EXT表单设计器充分利用EXT库的功能,提供了可视化...
简单的Ext应用实例,包括表单,与后台交互,基本组件等的使用。对于Ext初学者来说挺实用的,适用于Ext 3.0版本
通过以上步骤,你可以实现动态加载Ext表单数据的功能。在实际应用中,可能还需要考虑错误处理、数据验证、动态更新等问题,但以上代码提供了一个基础的实现思路。不断学习和实践,你将能更好地掌握Ext JS在构建动态...
总之,Ext JS的表单组件及其数据校验功能,为Web应用开发提供了强大且灵活的工具集,使得创建高质量的用户界面变得既简单又高效。通过合理配置和利用这些组件,开发者能够构建出既美观又实用的Web应用程序,显著提升...
EXT是Sencha公司开发的一款基于JavaScript的富客户端应用框架,它提供了一套完整的组件化UI构建工具,其中EXT表单(FormPanel)是用于创建复杂数据输入和验证的重要部分。在EXT表单中,TextField是最常见的输入控件...
EXT4.3实现动态表单全动态是一种在Web开发中常用的技术,主要应用于构建高度可配置和可扩展的用户界面。这种技术的核心是利用EXTJS库的EXT4.3版本,EXTJS是一个强大的JavaScript框架,专门用于创建富互联网应用程序...
### EXT异步提交FORM表单知识点详解 #### 一、EXT异步提交FORM表单概述 在现代Web应用开发中,异步提交表单是一种常见的技术手段,它能够提升用户体验,减少页面刷新带来的数据丢失风险,并能有效提高系统的响应...
本篇文章将聚焦于如何使用Ext表单组件来实现用户注册的功能。 首先,我们来看看`form.html`。这是一个HTML文件,通常会包含一个基本的页面结构,以及引入Ext JS库的链接。它可能还会有一个`<script>`标签,用来加载...
总结来说,EXT表单FormPanel和表格GridPanel是EXT JS中构建动态Web应用的关键组件,它们提供了丰富的功能和灵活的配置,可以实现复杂的用户界面和数据管理。通过理解并熟练运用这两个组件,开发者能够构建出交互性强...
本篇文章将深入探讨Ext表单组件中的checkbox,以及如何利用源码和相关工具进行定制和优化。 1. **复选框的基本概念** 复选框在用户界面中常用于让用户从多个选项中选择一个或多个。在Ext JS中,复选框是`Ext.form....
本篇我们主要关注"Ext表单组件之textField",它是最基础也是最常用的输入控件,用于接收用户的文本输入。 一、Ext.form.TextField简介 Ext.form.TextField是Ext JS中的一个核心组件,它允许用户在表单中输入单行...
EXT3.jar是EXT框架的一个版本,它包含EXT库的Java版本,通常用于Java Web应用程序,使得开发者能够利用EXT的组件和功能在服务器端进行渲染和处理。 EXT框架的核心在于其丰富的组件库,包括数据网格、表单、窗口、...
在实际开发中,理解并掌握如何在Ext JS中进行表单提交是非常重要的,这有助于创建高效、用户友好的Web应用。 由于提供的链接无法访问,具体的源码和详细步骤无法展示。但以上内容概括了Ext JS中表单提交的一般流程...
Ext JS是一个强大的JavaScript库,专门用于构建富客户端应用程序,它提供了丰富的组件库,包括各种表单元素、布局和数据绑定机制。XML作为一种常见的数据交换格式,常用于与后台服务器进行数据交互。 首先,`ext.js...
### Ext.form表单中各种属性应用详解 #### 1. Ext.form.NumberField **Ext.form.NumberField** 是 **Ext.form.TextField** 的一个扩展,它专为处理数字输入而设计,提供了一系列与数值相关的配置选项。 - **...
1. **Ext JS 基础**:Ext JS的核心在于其组件化的设计,如面板(Panel)、表格(Grid)、树形视图(Tree)、表单(Form)等。这些组件都是可复用的,并且可以方便地组合在一起,形成复杂的用户界面。数据绑定机制...
根据给定的信息,本文将详细解释“Ext 添加功能form表单实例”的知识点,这主要针对Ext初学者。...对于初学者来说,这是一个很好的学习资源,可以帮助他们快速掌握如何使用Ext构建复杂的Web应用程序。
title: 'EXT表单', items: [ {xtype: 'textfield', name: 'username'}, {xtype: 'passwordfield', name: 'password'} ], buttons: [{ text: '提交', handler: function() { formPanel.getForm().submit({ ...