y1d2y3xyz
- 浏览: 258680 次
- 性别:
- 来自: 深圳
-
文章分类
最新评论
-
dhunter：
mongodb 需要auth 怎么加呢？
linux下mongodb+nodejs环境搭建 -
y1d2y3xyz：
xie666 写道html.push('<td alig ...
javascript DOM操作性能-----创建DOM -
xie666：
html.push('<td align="c ...
javascript DOM操作性能-----创建DOM -
轩辕丶菓菓：
bushkarl 写道那我后台用struts2，我的name一 ...
Ext表单之loadRecord用法详解 -
heikediguo：
这样不会按照你想要的顺序加载。
加载JS文件
先看一下总体的效果!
这个界面是我由http://java-cn.com/members/register.jsp的注册表单转换成ExtJS实现!
这个表单基本上用到了ExtJS的所有组件,我先通过这个表单把EXT的Form组件功能呈现给大家，然后我会在接下来的文章中，针对每个组件进行具体的讲解!代码看上去会比较多,但实现很容易,目前还是针对界面部分,虽然表单中会设计到store方面的,但我都是用的本地模式实现,至于结合后台语言的话我会在grid和store那部分专门去讲解!
我分俩个文件(form.html和register.js)和一个图片文件夹,先看源码:
form.html:
register.js
上面代码涉及到的知识包括以下几个方面:
1.form组件的应用,包括有 Checkbox,ComboBox,DateField,FieldSet,HtmlEditor,Label,Radio,TextArea,TextField,FormPanel这些,其中没有用到的有 Hidden,NumberField,TimeField,TriggerField这几个,其中在表单中邮编那里其实可以用NumberField的,但涉及到验证我还是用了textfield并通过扩展Vtype实现数字和长度验证!
2.有用到布局管理,formlayout和columnlayout
3.Vtype验证规则,验证规则很简单,也很容易扩展,其中我有扩张邮编严整,俩次密码相等验证,只要你对正则表达式熟悉的话扩展很方便!
4.store,simplestore,jsonstore都有涉及到,但不是这里的重点
5.相关辅助函数的用法,如 getCmp
总结:熟悉API,特别是对于刚接触的来说尤为重要!英语不好就开着金山词霸一个翻译把,我是这么做的,不过也可以找中文的API文档如果英文实在太烂的话!
源码在下面,要的自己下载,我这里是完全能运行的，并且能完全兼容IE7.0和FF,其他浏览器我没有试过!注意编码问题,要是直接在IDE里面打开JS文件中文乱码的话,就先用记事本打开COPY过去就行!
我是2.2下开发的,代码肯定没问题的,都通过测试的
这个界面是我由http://java-cn.com/members/register.jsp的注册表单转换成ExtJS实现!
这个表单基本上用到了ExtJS的所有组件,我先通过这个表单把EXT的Form组件功能呈现给大家，然后我会在接下来的文章中，针对每个组件进行具体的讲解!代码看上去会比较多,但实现很容易,目前还是针对界面部分,虽然表单中会设计到store方面的,但我都是用的本地模式实现,至于结合后台语言的话我会在grid和store那部分专门去讲解!
我分俩个文件(form.html和register.js)和一个图片文件夹,先看源码:
form.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>register.html</title>
<style type="text/css">
body{background-color:#777777}
#form-ct{width: 700px;margin-left: auto;margin-right: auto;}
</style>
<link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../Ext/ext-all.js"></script>
<script type="text/javascript" src="register.js"></script>
</head>
<body>
<div id="form-ct"></div>
</body>
</html>
register.js
Ext.apply(Ext.form.VTypes, {
postNum:function(v) {
return /^[1-9]\d{5}$/.test(v);
},
postNumText: '邮政编号必须为6位的数字,并且第一位不能为0',
password : function(val, field) {
if (field.initialPassField) {
var pwd = Ext.getCmp(field.initialPassField);
return (val == pwd.getValue());
}
return true;
},
passwordText : '倆次輸入的密碼不一致，請重新輸入',
emailvalidator : function(val, field) {
if (field.initialField) {
var em = Ext.getCmp(field.initialField);
return (val == em.getValue());
}
return true;
},
emailvalidatorText : '倆次輸入的郵箱地址不一致，請重新輸入'
});
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'qtip';
var imageDate = [['i01.jpg', 'images/i01.jpg'],
['i02.jpg', 'images/i02.jpg'], ['i03.jpg', 'images/i03.jpg'],
['i04.jpg', 'images/i04.jpg'], ['i05.jpg', 'images/i05.jpg'],
['i06.jpg', 'images/i06.jpg'], ['i07.jpg', 'images/i07.jpg'],
['i08.jpg', 'images/i08.jpg'], ['i09.jpg', 'images/i09.jpg'],
['i10.jpg', 'images/i10.jpg']];
var image_store = new Ext.data.SimpleStore({
fields : ["image_name", "image_url"],
data : imageDate
});
var proviceDate = [{pname:'江西',pvalue:'jiangxi'},{pname:'湖南',pvalue:'hunan'},
{pname:'湖北',pvalue:'hubei'},{pname:'安徽',pvalue:'anhui'},
{pname:'四川',pvalue:'sichuang'},{pname:'河北',pvalue:'hebei'},
{pname:'广东',pvalue:'guangdong'},{pname:'福建',pvalue:'fujian'},
{pname:'其他',pvalue:'others'}];
var provice_store = new Ext.data.JsonStore({
data :proviceDate,
fields :[{name:'provice_name',mapping:'pname'},{name:'provice_value',mapping:'pvalue'}]
})
var industryDate = [{
iname : '自由职业',
ivalue : 'zyzy'
}, {
iname : '企业干部',
ivalue : 'qygb'
}, {
iname : '政府官员',
ivalue : 'zfgy'
}, {
iname : '公务员',
ivalue : 'gwy'
}, {
iname : '工人',
ivalue : 'gr'
}, {
iname : '农民',
ivalue : 'nm'
}, {
iname : '主妇',
ivalue : 'zf'
}, {
iname : '待业',
ivalue : 'dy'
}, {
iname : '军人',
ivalue : 'jr'
}, {
iname : '其他',
ivalue : 'others'
}];
var industry_store = new Ext.data.JsonStore({
data : industryDate,
fields : [{
name : 'industry_name',
mapping : 'iname'
}, {
name : 'industry_value',
mapping : 'ivalue'
}]
})
var education_data =
[
{education_value:"小学"},
{education_value:"初中"},
{education_value:'高中'},
{education_value:'中專'},
{education_value:'大專'},
{education_value:'大學'},
{education_value:'本科'},
{education_value:'碩士'},
{education_value:'博士'}
];
var education_store = new Ext.data.JsonStore({
data:education_data,
fields : [{name :'education_value',mapping : 'education_value'}]
});
var form = new Ext.FormPanel({
title : '新会员注册',
width : 700,
autoHeight : true,
renderTo : 'form-ct',
bodyStyle : "padding:2px",
border : false,
frame : true,
items : [{
autoHeight : true,
xtype : 'fieldset',
title : '必填注册信息',
items : [{// 用户名信息
layout : 'column',
defaults : {
columnWidth : '.5'
},
items : [{
layout : 'form',
items : {
fieldLabel : '用户名',
xtype : 'textfield',
name : 'userName',
allowBlank : false,
blankText : '用戶名不能為空',
minLength : 4,
minLengthText : '用戶名長度不得小於4個字符長度',
maxLength : 20,
maxLengthText : '用戶名的長度不得大於20個字符的長度',
anchor : '95%'
}
}, {
xtype : 'label',
html : '<font color="red">*</font> 长度限制为4－20小写字母数字'
}]
}, { // 密码信息
layout : 'column',
items : [{
columnWidth : '.4',
layout : 'form',
items : {
fieldLabel : '密码',
xtype : 'textfield',
inputType : 'password',
allowBlank : false,
blankText : '密碼不能為空',
minLength : 6,
minLengthText : '密碼長度不得小於6個字符長度',
name : 'pass',
id : 'pass',
anchor : '95%'
}
}, {
columnWidth : '.6',
layout : 'form',
xtype : 'label',
html : '<font color="red">*</font> 至少6位，区分大小写'
}]
}, {// 重复密码信息
layout : 'column',
items : [{
columnWidth : '.4',
layout : 'form',
items : {
fieldLabel : '重复密码',
xtype : 'textfield',
name:'repass',
inputType : 'password',
anchor : '95%',
vtype : 'password',
initialPassField : 'pass'
}
}, {
columnWidth : '.6',
layout : 'form',
xtype : 'label',
html : '<font color="red">*</font> 至少6位，区分大小写，并且和初始密码一致'
}]
}, {// 邮箱信息
layout : 'column',
items : [{
columnWidth : '.5',
layout : 'form',
items : {
fieldLabel : '邮箱',
xtype : 'textfield',
allowBlank : false,
blankText : 'email地址不能為空',
vtype : 'email',
emailText : '郵箱格式不匹配(user@domain.com)',
name : 'email',
id : 'email',
anchor : '95%'
}
},{
columnWidth : '.11',
defaultType : 'checkbox',
defaults : {
layout : 'form'
},
items : {
checked : true,
boxLabel : '不公开',
name : 'email_pub'
}
}, {
columnWidth : '.05',
layout : 'form',
xtype : 'label',
html : '<font color="red">*</font> '
}]
}, {// 确认邮箱信息
layout : 'column',
defaults : {
layout : 'form',
columnWidth : '.5'
},
items : [{
items : {
fieldLabel : '确认邮箱',
xtype : 'textfield',
name:'reemail',
vtype : 'emailvalidator',
initialField : 'email',
anchor : '95%'
}
}, {
xtype : 'label',
html : '<font color="red">*</font>'
}]
}]
}, new Ext.form.FieldSet({
title : '高级用户设置选项信息',
autoHeight : true,
animCollapse :true,
//collapsible : true,
collapsed :true,
checkboxToggle :true,
items : [{
layout : 'column',
defaults : {
layout : 'form',
columnWidth : '.5'
},
items : [{
items : {
fieldLabel : '選擇頭像',
xtype : 'combo',
store : image_store,
mode : 'local',
emptyText : 'i01.jpg',//請選擇頭像
forceSelection : true,
selectOnFocus : true,
triggerAction : 'all',
typeAhead : true,
valueField : 'image_url',
displayField : 'image_name',
anchor : '95%',
name : 'imgUrl',
listeners : {
scope : this,
change : function(e) {
field = Ext.get('im');
field.dom.src = e.value;
e.blur;
}
}
}
}, {
xtype : 'label',
html : '<img id="im" src="images/i01.jpg" height=32 width=32 />'
}]
},{
xtype :'textfield',
name :'alias',
fieldLabel :'昵称'
},{
layout : 'column',
defaults : {
layout : 'form',
columnWidth : '.45'
},
items :[{
items:{
xtype :'textfield',
name :'trueName',
fieldLabel :'真实姓名'
}
},{
xtype :'checkbox',
checked : true,
boxLabel : '不公开',
name : 'trueName_pub'
}]
},{
xtype: 'radiogroup',
fieldLabel: '性别',
anchor : '50%',
items: [
{boxLabel: '保密', name: 'sex',inputValue :1, checked: true},
{boxLabel: '男', name: 'sex',inputValue :2},
{boxLabel: '女', name: 'sex',inputValue :3}
]
},{
xtype :'combo',
fieldLabel: '省份',
store : provice_store,
mode : 'local',
emptyText : '江西',
forceSelection : true,
selectOnFocus : true,
triggerAction : 'all',
typeAhead : true,
valueField : 'provice_value',
displayField : 'provice_name',
anchor : '45%',
name : 'provice'
},{
xtype : 'combo',
fieldLabel :'行業',
store : industry_store,
mode : 'local',
emptyText : '自由職業',
forceSelection : true,
selectOnFocus : true,
triggerAction : 'all',
typeAhead : true,
valueField : 'industry_value',
displayField : 'industry_name',
anchor : '45%',
name : 'work'
},{
xtype : 'combo',
fieldLabel :'最高學歷',
store :education_store,
mode : 'local',
emptyText : '小學',
forceSelection : true,
selectOnFocus : true,
triggerAction : 'all',
typeAhead : true,
valueField : 'education_value',
displayField : 'education_value',
anchor : '45%',
name : 'education'
},{
xtype:'datefield',
fieldLabel:'出生日期',
name:'brithday',
minValue:'01/01/1900',
minText:'出生日期不得在1900年01月01日以前',
maxValue:new Date(),
maxText:'出生日期错误或者超出范围',
anchor : '45%'
},{
xtype:'textfield',
fieldLabel:'网站',
name:'web_link',
vtype:'url',
urlText:'网站格式不正确'
},{
xtype:'textfield',
fieldLabel:'邮编',
name:'post',
vtype:'postNum',//自定义验证规则
anchor : '45%'
},{
xtype:'textarea',
name:'sign',
fieldLabel:'签名',
anchor : '75%'
},{
xtype:'htmleditor',
name:'introduction',
fieldLabel:'个人介绍',
height:200,
anchor : '95%'
}]
})],
buttons : [{
text : '提交',
scope:this,
handler:function(){
alert(Ext.encode(form.form.getValues()));
}
}, {
text : '重置',
handler:function(){
form.form.reset();
}
}]
})
})
上面代码涉及到的知识包括以下几个方面:
1.form组件的应用,包括有 Checkbox,ComboBox,DateField,FieldSet,HtmlEditor,Label,Radio,TextArea,TextField,FormPanel这些,其中没有用到的有 Hidden,NumberField,TimeField,TriggerField这几个,其中在表单中邮编那里其实可以用NumberField的,但涉及到验证我还是用了textfield并通过扩展Vtype实现数字和长度验证!
2.有用到布局管理,formlayout和columnlayout
3.Vtype验证规则,验证规则很简单,也很容易扩展,其中我有扩张邮编严整,俩次密码相等验证,只要你对正则表达式熟悉的话扩展很方便!
4.store,simplestore,jsonstore都有涉及到,但不是这里的重点
5.相关辅助函数的用法,如 getCmp
总结:熟悉API,特别是对于刚接触的来说尤为重要!英语不好就开着金山词霸一个翻译把,我是这么做的,不过也可以找中文的API文档如果英文实在太烂的话!
源码在下面,要的自己下载,我这里是完全能运行的，并且能完全兼容IE7.0和FF,其他浏览器我没有试过!注意编码问题,要是直接在IDE里面打开JS文件中文乱码的话,就先用记事本打开COPY过去就行!
3
顶
顶
0
踩
踩
分享到：
评论
2 楼
y1d2y3xyz
2010-01-24
f117f 写道
请教一下，楼主你这是ext多少版本的 我在2.2的环境下 Firefox和IE都不能通过！
我是2.2下开发的,代码肯定没问题的,都通过测试的
1 楼
f117f
2009-12-01
请教一下，楼主你这是ext多少版本的 我在2.2的环境下 Firefox和IE都不能通过！
发表评论
-
Extjs源码之--Ext事件机制/继承关系
2011-10-16 16:36 1875Extjs源码之--Ext.lib.Event 中分析了EX ... -
Extjs源码之--Ext.lib.Event(事件的简单封装)
2011-10-16 11:34 2656这个对象是对事件的基础封装，在实际使用中，我们往往不从这里去 ... -
Extjs源码之--Ext.lib.Dom(Dom的基本封装)
2011-10-13 23:31 2373Extjs的对Dom最基础的封装，主要包括：元素的包含关系，元 ... -
Extjs源码之---Ext.util.DelayedTask
2011-10-12 22:56 2448/* 创建对象 var task = new Ext. ... -
Extjs源码之-- Ext.util.JSON
2011-09-23 23:19 4049很多写extjs的朋友说，Extjs的源码之间的关系太紧了，所 ... -
Ext.form.ComboBox 远程带分页显示
2011-09-23 22:00 1883很多时候针对大数据量的下拉列表的时候，我们通常需要分页显示数据 ... -
Ext.form.ComboBox change事件的BUG
2011-09-08 23:11 5402因为项目需要，想用Ext的combo控件实现动态级联，发现co ... -
Ext.grid.EditorGridPanel 中combo的显示异常
2011-09-03 00:58 2786Ext.grid.EditorGridPanel 在项目中用到 ... -
extjs源码分析-Ext.util.TaskRunner(模拟多线程)
2011-08-12 12:09 3030/** * @class Ext.util.TaskR ... -
extjs源码分析-016(Ext....)
2011-03-28 23:04 1061Ext.apply(Ext, function(){ ... -
extjs源码分析-015(Number扩展)
2011-03-20 01:03 898Ext.applyIf(Number.prototype, ... -
extjs源码分析-013(Array扩展)
2011-03-19 11:03 1128Ext.applyIf(Array.prototype, ... -
extjs源码分析-013(String扩展)
2011-03-18 23:05 1290//字符串替换 /* var cls = 'my-cl ... -
extjs源码分析-012(Funtion扩展)
2011-03-18 22:42 1304Ext.apply(Function.prototype, ... -
extjs源码分析-011(namespace)
2011-03-10 22:54 1094//命名空间,就是创建一个OBJ的一个属性, names ... -
extjs源码分析-009(Ext.urlAppend/toArray)
2011-03-10 22:43 1869//在URL后面追加参数 urlAppend : fun ... -
extjs源码分析-009(Ext.urlDecode/urlEncode)
2011-03-09 23:17 3283//把json格式转化成url的编码方式 // e.g. ... -
extjs源码分析-008(Ext.removeNode)
2011-03-09 22:35 1791DOC = document; removeNode : ... -
extjs源码分析-007(Ext.each)
2011-02-08 14:40 1625each : function(array, fn ... -
extjs源码分析-006(Ext.override/Ext.extend)
2011-02-08 00:40 2134override : function(o ...
相关推荐
10. **实际应用**：在实际项目中，EXT表单验证常用于注册、登录、修改个人信息等场景，确保用户输入的数据符合业务逻辑要求。 通过阅读如"EXT 表单验证_journeylin_新浪博客.html"、"ExtJS中表单验证使用自定义...
这通常涉及到Ajax请求，Ext3.0的Ajax组件（如Ext.Ajax或Ext.data.Connection）可以方便地实现异步通信，使得用户无需刷新页面即可完成验证。 在实际项目中，为了提高用户体验，还可以加入一些额外的功能，比如： 1...
在这个"Ext实现的论坛前台代码"项目中，开发者利用ExtJS的组件化和数据绑定机制，构建了一个完整的论坛前端界面，提供了用户交互丰富的功能，如版主管理、发帖、回帖以及用户注册等。 1. **ExtJS 框架基础**： - *...
Ext JS是一个强大的JavaScript框架，提供了丰富的组件和功能，包括复杂的表单验证机制。 首先，理解Vtype的概念。Vtype是Ext JS中的一种内置验证机制，用于对表单字段的输入值进行简单的验证。通过为表单字段设置...
在CURD场景下，Ext常常用于创建表格、表单等交互元素，用户可以通过这些元素查看、编辑和管理数据。例如，使用Ext的数据网格组件，可以展示从服务器获取的记录，同时支持排序、过滤和分页等功能。对于CRUD操作，Ext...
一旦数据保存完成，对话框消失，并弹出一个成功的消息框，告知用户注册成功。 #### 三、总结 通过这个基于Ext 2.1的用户验证注册示例，我们可以看到Ext JS在实现复杂的用户界面和交互逻辑方面的强大能力。它不仅...
Ext JS 提供了一套完整的组件体系，包括表格（Grid）、面板（Panel）、表单（Form）、树形视图（Tree）、图表（Charts）等，几乎涵盖了所有常见的用户界面元素。这些组件都具有丰富的API和配置选项，可以灵活地满足...
组件分为EXT核心库中的组件、EXT应用示例提供的扩展组件以及用户自定义组件。 二、组件的基本应用 1. xtype：组件的类别标识，用于指定组件类型。 2. 创建组件：通过`new`操作符创建组件对象，或者在容器中使用...
此外，还会讲解gwtext的组件体系，包括按钮、表单、面板、树形视图等基本组件的使用方法。 第二部分：GWT Ext深入 这部分将带你深入理解GWT Ext的功能和用法。GWT Ext不仅提供了丰富的组件，还包含数据绑定、事件...
EXT是JavaScript库Ext JS的缩写，它是一个用于构建Web应用程序的前端框架，以其丰富的用户界面组件和强大的数据管理功能而闻名。Dojo China则是一个专注于JavaScript开发框架Dojo Toolkit的社区，它提供了大量的资源...
- 组件分类包括：Ext核心库中的组件、应用示例中提供的扩展组件以及用户自定义组件。 2. **组件的创建与使用**： - 使用`xtype`来指定组件的类型，这是一种独特的标识符。 - 创建组件有两种方式：一是通过`new`...
5. **动画效果**：EXT提供了一系列的动画效果，"ext-base.js"中包含了动画的实现，使得UI组件可以平滑过渡，提升用户体验。 6. **布局管理**：EXT的布局系统是其组件化的一大亮点，"ext-base.js"中定义了各种布局...
1. **组件体系**：了解Ext JS的组件模型，包括容器（Container）、面板（Panel）、表单（Form）等基本元素，以及它们之间的嵌套关系和布局管理。 2. **数据绑定**：Gwt-ext支持双向数据绑定，这意味着UI组件的状态...
10. **事件处理**：组件间通过事件进行通信，用户操作、数据变更等都可以触发事件，开发者可以注册监听器来响应这些事件。 11. **主题和皮肤**：Ext支持多种预定义的主题，如Neptune、Trident等，允许自定义样式，...
开发者可以通过注册事件监听器来响应用户操作或组件状态变化，实现业务逻辑。 8. **AJAX支持**：Ext 2.0内置了AJAX功能，可以方便地进行异步数据请求和响应处理，与服务器进行数据交互，实现动态加载和更新。 9. *...
Ext是一个强大的前端开发框架，提供了丰富的UI组件和数据绑定机制，适用于构建复杂的Web应用。 首先，我们需要了解Ext的基本结构。ExtJS基于MVC（Model-View-Controller）设计模式，包括Store（数据存储）、Model...
7. **自定义事件**：EXT允许开发者注册监听器来响应文件选择、上传开始、上传成功、上传失败等事件，从而实现个性化的交互设计。 8. **文件预览**：对于支持的文件类型，EXT还可以提供文件预览功能，让用户在上传前...
5. **表单处理**：EXT的表单组件功能强大，支持各种输入类型、验证功能以及与服务器的数据交互，便于创建复杂的用户输入界面。 6. **图表组件**：EXT 2.0.2包含了图表组件，可用于创建各种统计和分析图形，如折线图...