Ext.get(document.body).update('<div id="test"></div>');
基本页面:
- index.html
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
- index-prod.html
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext.js"></script>
<script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>
部署(自定义生成只包含应用程序需要的代码):
1.运行-cmd-cd命令浏览到应用程序所在的目录
2.生成JSB3文件(可省略)
sencha create jsb -a index.html -p app.jsb3
3.
sencha create jsb -a http://localhost/helloext/index.html -p app.jsb3
4.
sencha build -p app.jsb3 -d .
一、ExtJS的form表单的提交:
1.ajax(默认提交)
handler: function(){
if (!formPanel.getForm().isValid()) return;
formPanel.getForm().submit({
waitMsg: '正在提交數據',
waitTitle: '提示',
method:'POST',
url: '',
success: function(form, action) {
Ext.Msg.alert('提示', '提交成功');
},
failure: function(form, action) {
Ext.Msg.alert('提示', '錯誤,原因如下:' + action.result.errors.info);
}
});
}
2.非ajax提交
//实现非AJAX提交表单一定要加下面的两行!
onSubmit : Ext.emptyFn,
submit : function() {
//再次设定action的地址
this.getEl().dom.action ='user.do?method=login'; this.getEl().dom.method = 'post';
//提交submit
this.getEl().dom.submit();
};
3.ajax提交
Ext.Ajax.request({
//请求地址
url: 'login.do',
//提交参数组
params: {
LoginName:Ext.get('LoginName').dom.value,
LoginPassword:Ext.get('LoginPassword').dom.value
},
//成功时回调
success: function(response, options) {
//获取响应的json字符串
var responseArray = Ext.util.JSON.decode(response.responseText);
if(responseArray.success==true){
Ext.Msg.alert('恭喜','您已成功登录!');
} else{
Ext.Msg.alert('失败','登录失败,请重新登录');
}
}
});
二.Ext校验
//放在onReady的function(){}中
Ext.QuickTips.init(); //为组件提供提示信息功能,form的主要提示信息就是客户端验证的错误信息。
Ext.form.Field.prototype.msgTarget='side'; //提示的方式,枚举值为
qtip-当鼠标移动到控件上面时显示提示
title-在浏览器的标题显示,但是测试结果是和qtip一样的
under-在控件的底下显示错误提示
side-在控件右边显示一个错误图标,鼠标指向图标时显示错误提示. 默认值.
id-[element id]错误提示显示在指定id的HTML元件中
1.一个最简单的例子:空验证
//空验证的两个参数
1.allowBlank:false//false则不能为空,默认为true
2.blankText:string//当为空时的错误提示信息
js代码为:
var form1 = new Ext.form.FormPanel({
width:350,
renderTo:"form1",
title:"FormPanel",
defaults:{xtype:"textfield",inputType:"password"},
items:[
{fieldLabel:"不能为空",
allowBlank:false, //不允许为空
blankText:"不能为空", //错误提示信息,默认为This field is required!
id:"blanktest",
}
]
});
2.用vtype格式进行简单的验证。
在此举邮件验证的例子,重写上面代码的items配置:
items:[
{fieldLabel:"不能为空",
vtype:"email",//email格式验证
vtypeText:"不是有效的邮箱地址",//错误提示信息,默认值我就不说了
id:"blanktest",
anchor:"90%"
}
你可以修改上面的vtype为以下的几种extjs的vtype默认支持的验证:
//form验证中vtype的默认支持类型
1.alpha //只能输入字母,无法输入其他(如数字,特殊符号等)
2.alphanum//只能输入字母和数字,无法输入其他
3.email//email验证,要求的格式是"langsin@gmail.com"
4.url//url格式验证,要求的格式是
http://www.langsin.com
3.高级自定义密码验证
前面的验证都是extjs已经提供的,我们也可以自定义验证函数。
//先用Ext.apply方法添加自定义的password验证函数(也可以取其他的名字)
Ext.apply(Ext.form.VTypes,{
password:function(val,field){//val指这里的文本框值,field指这个文本框组件,大家要明白这个意思
if(field.confirmTo){//confirmTo是我们自定义的配置参数,一般用来保存另外的组件的id值
var pwd=Ext.get(field.confirmTo);//取得confirmTo的那个id的值
return (val==pwd.getValue());
}
return true;
}
});
//配置items参数
items:[{fieldLabel:"密码",
id:"pass1",
},{
fieldLabel:"确认密码",
id:"pass2",
vtype:"password",//自定义的验证类型
vtypeText:"两次密码不一致!",
confirmTo:"pass1",//要比较的另外一个的组件的id
}
Ext.apply(Ext.form.VTypes,{
"age":function(_v){
if(/^\d$/.test(_v)){ //判断必须是数字
var _age = parseInt(_v);
if(_age < 200)
return true;
}
return false;
},
"ageText":"该输入项必须是年龄格式,格式如:23" //出错信息
"ageMask":/[0-9]/i
});
4.使用正则表达式验证
new Ext.form.TextField({
fieldLabel : "姓名",
name : "author_nam",
regex : /[\u4e00-\u9fa5]/, //正则表达式在/...../之间. [\u4e00-\u9fa5] : 只能输入中文.
regexText:"只能输入中文!", //正则表达式错误提示
allowBlank : false //此验证依然有效.不许为空.
分享到:
相关推荐
### EXTJS 4.0 视频教程 30集 关键知识点解析 #### 一、EXTJS 4.0 概述与安装配置 **1.1 EXTJS 4.0简介** EXTJS 4.0是一款基于JavaScript的开源前端框架,用于构建交互式的Web应用程序。它提供了一套丰富的UI组件...
这份教程由龚辟愚收集整理,不仅包含了Extjs的基础知识,还有详尽的组件使用指南和实战案例分析。同时,教程还提供了一个基于Extjs 2.0开发的单用户Blog系统的源代码,这对于理解和实践Extjs的开发流程十分有帮助。...
- **官方文档阅读**:官方文档是了解EXTJS最权威的资料来源,应该作为学习过程中的重要参考资料。 - **实践操作**:通过编写代码练习所学知识,不断实践可以帮助巩固记忆。 - **社区交流**:加入EXTJS相关的技术论坛...
Sencha Touch和ExtJS是两种流行的JavaScript框架,主要用于构建富客户端的移动和桌面应用程序。它们提供了丰富的组件库、数据管理工具以及强大的布局机制,使得开发者能够构建交互性强、功能丰富的Web应用。在这个...
### ExtJS实用开发指南知识点概览 #### 一、ExtJS概述 - **定义与特点**:ExtJS是一个强大的客户端JavaScript框架,专为构建现代化、交互丰富的Web应用程序而设计。它独立于后端技术,可以在.NET、Java、PHP等多种...
表单(Form)是Web应用中收集用户输入的基本组件,ExtJS提供了各种类型的输入字段和验证机制,使得创建美观且功能强大的表单变得简单易行。 #### 如何阅读ExtJS API文档 掌握如何阅读和理解API文档是成为高级开发者...
【标签】"源码"和"工具"表明这个教程可能包含实际的源代码示例,读者可以直接参考和使用,同时可能会介绍一些用于开发的实用工具或者ExtJS框架中的特定工具类。 【压缩包子文件的文件名称列表】"kindeditor",这...
### Extjs中文教程知识点梳理 #### 一、Extjs简介及环境搭建 - **Extjs**是一种基于JavaScript的开源框架,用于构建现代化的Web应用程序。它提供了丰富的UI组件库、强大的数据处理能力和灵活的布局管理机制。 - **...
### ExtJS 入门文档知识点概述 #### 一、ExtJS 概述 ExtJS 是一款基于 JavaScript 的开源前端框架,主要用于构建复杂的企业级 Web 应用程序。它提供了丰富的 UI 组件库以及数据处理能力,能够帮助开发者快速构建...
正如描述中提到的,小花整理的这些示例代码,非常适合初学者作为参考,来理解ExtJs中进行增删改查操作的基本流程。通过这些示例,初学者可以了解如何使用ExtJs构建表单界面,以及如何通过按钮事件触发后台服务操作。...
### ExtJs 使用文档知识点概述 #### 1. 什么是 ExtJs? ExtJS 是一款功能强大的前端 JavaScript 框架,用于构建丰富的用户界面 (RIA) 和 AJAX 应用程序。它是一个与后端技术无关的框架,这意味着它可以与 .Net、...
7. **PDF教程**:随EXT-2.3.0文件包提供的PDF教程,详细介绍了EXTJS的基础知识、组件用法、事件处理和高级特性,是学习EXTJS的重要参考资料。 在EXTJS的实践中,开发者通常会遇到以下几个关键知识点: - **组件...
以下是这些项目涉及的关键知识点: 1. **项目一:客户关系管理系统 (CRM)** - **B/S模式**:Browser/Server结构,前端通过浏览器访问,后端为服务器处理。 - **Struts**:MVC框架,负责控制器部分,处理请求和...
2. `ExtJS2.0实用简明教程(easyjf).pdf`:这可能是针对EXT 2.0版本的一个实战教程,适合初学者学习EXT的基础知识和实际应用技巧。教程可能涵盖了EXT 2.0的主要功能,如组件的创建、数据存储和加载、AJAX通信以及响应...
这份资料收集了多个优秀的毕业设计项目源码,涵盖了不同类型的Java应用,如Web应用、桌面应用等。这些项目不仅可以让学生了解真实项目的开发流程,还可以作为参考模板来帮助他们完成自己的毕业设计。 #### 八、基于...
【GWT-Ext 知识点详解】 GWT-Ext 是一个基于 Google Web Toolkit (GWT) 和 ExtJS 的开源控件库,专为构建富互联网应用程序(RIA)提供强大的功能。它允许开发者使用纯 Java 语言进行界面开发,极大地提高了开发效率。...
这些文档通常是由官方或社区编译整理,用于方便开发者和用户查询相关技术知识。 1. **jEasyUI 1.3.6版API中文版 (Richie696)**: jEasyUI 是一个基于 jQuery 的轻量级前端框架,主要用于构建用户界面。这个API中文版...
Jxstar系统管理手册是一份关于Jxstar系统操作和功能使用的指南,它详细介绍了系统的软件界面控件、系统组件等关键知识点,旨在指导用户如何高效地使用和管理系统。 一、软件界面控件 1.1 界面控件概述 Jxstar系统...
《企业人力资源系统的设计与实现》这篇毕业论文涉及了计算机科学与技术领域的多个知识点,主要集中在软件工程过程、框架技术的应用以及企业进销存管理系统的开发。以下是对这些知识点的详细阐述: 1. **软件工程...