`
maxiow
  • 浏览: 13402 次
文章分类
社区版块
存档分类
最新评论

ExtJS小知识【多处收集供自己参考】

 
阅读更多
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                //此验证依然有效.不许为空.
分享到:
评论

相关推荐

    EXTJS4.0视频教程 30集 下载地址

    ### EXTJS 4.0 视频教程 30集 关键知识点解析 #### 一、EXTJS 4.0 概述与安装配置 **1.1 EXTJS 4.0简介** EXTJS 4.0是一款基于JavaScript的开源前端框架,用于构建交互式的Web应用程序。它提供了一套丰富的UI组件...

    Extjs实用教程入门学习Extjs

    这份教程由龚辟愚收集整理,不仅包含了Extjs的基础知识,还有详尽的组件使用指南和实战案例分析。同时,教程还提供了一个基于Extjs 2.0开发的单用户Blog系统的源代码,这对于理解和实践Extjs的开发流程十分有帮助。...

    EXTJS4.0视频教程

    - **官方文档阅读**:官方文档是了解EXTJS最权威的资料来源,应该作为学习过程中的重要参考资料。 - **实践操作**:通过编写代码练习所学知识,不断实践可以帮助巩固记忆。 - **社区交流**:加入EXTJS相关的技术论坛...

    sencha touch和ExtJS使用的日历插件

    Sencha Touch和ExtJS是两种流行的JavaScript框架,主要用于构建富客户端的移动和桌面应用程序。它们提供了丰富的组件库、数据管理工具以及强大的布局机制,使得开发者能够构建交互性强、功能丰富的Web应用。在这个...

    ExtJS实用开发指南.pdf

    ### ExtJS实用开发指南知识点概览 #### 一、ExtJS概述 - **定义与特点**:ExtJS是一个强大的客户端JavaScript框架,专为构建现代化、交互丰富的Web应用程序而设计。它独立于后端技术,可以在.NET、Java、PHP等多种...

    ExtJS Basic Training

    表单(Form)是Web应用中收集用户输入的基本组件,ExtJS提供了各种类型的输入字段和验证机制,使得创建美观且功能强大的表单变得简单易行。 #### 如何阅读ExtJS API文档 掌握如何阅读和理解API文档是成为高级开发者...

    无废话ExtJs 教程十二[员工信息表Demo:AddUser]

    【标签】"源码"和"工具"表明这个教程可能包含实际的源代码示例,读者可以直接参考和使用,同时可能会介绍一些用于开发的实用工具或者ExtJS框架中的特定工具类。 【压缩包子文件的文件名称列表】"kindeditor",这...

    Extjs中文教程

    ### Extjs中文教程知识点梳理 #### 一、Extjs简介及环境搭建 - **Extjs**是一种基于JavaScript的开源框架,用于构建现代化的Web应用程序。它提供了丰富的UI组件库、强大的数据处理能力和灵活的布局管理机制。 - **...

    extjs入门文档

    ### ExtJS 入门文档知识点概述 #### 一、ExtJS 概述 ExtJS 是一款基于 JavaScript 的开源前端框架,主要用于构建复杂的企业级 Web 应用程序。它提供了丰富的 UI 组件库以及数据处理能力,能够帮助开发者快速构建...

    extJs 常用到的增,删,改,查操作代码

    正如描述中提到的,小花整理的这些示例代码,非常适合初学者作为参考,来理解ExtJs中进行增删改查操作的基本流程。通过这些示例,初学者可以了解如何使用ExtJs构建表单界面,以及如何通过按钮事件触发后台服务操作。...

    ExtJs使用文档

    ### ExtJs 使用文档知识点概述 #### 1. 什么是 ExtJs? ExtJS 是一款功能强大的前端 JavaScript 框架,用于构建丰富的用户界面 (RIA) 和 AJAX 应用程序。它是一个与后端技术无关的框架,这意味着它可以与 .Net、...

    ext-2.3.0+ext教程

    7. **PDF教程**:随EXT-2.3.0文件包提供的PDF教程,详细介绍了EXTJS的基础知识、组件用法、事件处理和高级特性,是学习EXTJS的重要参考资料。 在EXTJS的实践中,开发者通常会遇到以下几个关键知识点: - **组件...

    JAVA项目经验描述-适合无经验毕业生参考.doc

    以下是这些项目涉及的关键知识点: 1. **项目一:客户关系管理系统 (CRM)** - **B/S模式**:Browser/Server结构,前端通过浏览器访问,后端为服务器处理。 - **Struts**:MVC框架,负责控制器部分,处理请求和...

    ext 资料收集

    2. `ExtJS2.0实用简明教程(easyjf).pdf`:这可能是针对EXT 2.0版本的一个实战教程,适合初学者学习EXT的基础知识和实际应用技巧。教程可能涵盖了EXT 2.0的主要功能,如组件的创建、数据存储和加载、AJAX通信以及响应...

    【藏宝图】(珍藏版)2012java开发工程师必备精品资料(115)

    这份资料收集了多个优秀的毕业设计项目源码,涵盖了不同类型的Java应用,如Web应用、桌面应用等。这些项目不仅可以让学生了解真实项目的开发流程,还可以作为参考模板来帮助他们完成自己的毕业设计。 #### 八、基于...

    GWT-Ext_体验之旅.doc

    【GWT-Ext 知识点详解】 GWT-Ext 是一个基于 Google Web Toolkit (GWT) 和 ExtJS 的开源控件库,专为构建富互联网应用程序(RIA)提供强大的功能。它允许开发者使用纯 Java 语言进行界面开发,极大地提高了开发效率。...

    文昌平的chm文档大全

    这些文档通常是由官方或社区编译整理,用于方便开发者和用户查询相关技术知识。 1. **jEasyUI 1.3.6版API中文版 (Richie696)**: jEasyUI 是一个基于 jQuery 的轻量级前端框架,主要用于构建用户界面。这个API中文版...

    Jxstar系统管理手册V2.0.pdf

    Jxstar系统管理手册是一份关于Jxstar系统操作和功能使用的指南,它详细介绍了系统的软件界面控件、系统组件等关键知识点,旨在指导用户如何高效地使用和管理系统。 一、软件界面控件 1.1 界面控件概述 Jxstar系统...

    企业人力资源系统的设计与实现

    《企业人力资源系统的设计与实现》这篇毕业论文涉及了计算机科学与技术领域的多个知识点,主要集中在软件工程过程、框架技术的应用以及企业进销存管理系统的开发。以下是对这些知识点的详细阐述: 1. **软件工程...

Global site tag (gtag.js) - Google Analytics