Extjs的使用总结笔记

一:Extjs自带验证

1.alpha //只能输入字母,无法输入其他(如数字,特殊符号等) 
2.alphanum//只能输入字母和数字,无法输入其他 
3.email//email验证,要求的格式是"" 
4.url//url格式验证,要求的格式是http://www.baidu.com

5.allowBlank:false, //不允许为空

6.使用正则表达式验证

new Ext.form.TextField({ fieldLabel : "姓名", name : "author_nam", regex : /[u4e00-u9fa5]/, //正则表达式在/...../之间. [u4e00-u9fa5] : 只能输入中文. regexText:"只能输入中文!", //正则表达式错误提示 allowBlank : false //此验证依然有效.不许为空.

需要在组件上设置(items外面)  monitorValid:true, //验证开启。不通过提交按钮不可用

提交按钮上设置formBind:true   //验证开启

二:Extjs自定义验证

Ext.apply(Ext.form.VTypes,{

password:function(val,field){//val是第二次文本框,field文本框组件

if(field.confirmTo){//confirmTo是我们自定义的配置参数,一般用来保存另外的组件的id值

var pwd=Ext.getCmp(‘userpass‘);//获取第一次密码 id=userpass是第一次

return (val==pwd.rawValue);

}

return true;

}

});

allowBlank:false, //不允许为空

blankText:"不能为空", //错误提示

vtype:‘password‘,

vtypeText:‘两次输入的密码不一致‘,

confirmTo:‘userpass‘, //组件id

三:Extjs的格式化日期     addData.create_date=Ext.util.Format.date(Ext.getCmp(‘create_date‘).getValue(),‘Y-m-d‘);

四:Extjs的异步同步请求

Ext.Ajax.request({

url:‘../../login/isComplaintAvaliable.html?tag=cs‘,

async:false,//异步同步的开关

success:function(response, opts){

cs = Ext.decode(response.responseText).result;

}

});

Ext.Ajax.request({

url:‘../../login/isComplaintAvaliable.html?tag=ps‘,

async:false,//异步同步的开关

success:function(response, opts){

ps = Ext.decode(response.responseText).result;

}

});

xtype:‘fieldset‘,
title:‘用户信息‘,    //显示如下

六.Extjs的下拉框控件

xtype:‘combobox‘,

fieldLabel:‘身份‘,

store:userStore,

displayField: "name", //显示的字段

valueField: "name",   //值的字段

emptyText:‘请选择身份‘ ,

editable: false,       //是否可编译

var userStore=Ext.create(Ext.data.Store,{

fields: [‘name‘],

data:[{"name":"zhaolingwu"},{"name":"系统管理员"},{"name":"PsUser"},{"name":"ruiyuan"},{"name":"CsUser"}]

});

七:Extjs的form表单中的XTYP

form Ext.FormPanel 
checkbox Ext.form.Checkbox 
combo Ext.form.ComboBox 
datefield Ext.form.DateField 
field Ext.form.Field 
fieldset Ext.form.FieldSet 
hidden Ext.form.Hidden 
htmleditor Ext.form.HtmlEditor 
label Ext.form.Label 
numberfield Ext.form.NumberField 
radio Ext.form.Radio 
textarea Ext.form.TextArea 
textfield Ext.form.TextField 
timefield Ext.form.TimeField 
trigger Ext.form.TriggerField

时间: 2024-11-07 06:48:10

Extjs的使用总结笔记的相关文章

extjs model store学习笔记

http://docs.sencha.com/extjs/6.2.0/guides/core_concepts/data_package.html // 定义一个ModelExt.define('MyApp.model.User', { extend: 'Ext.data.Model', fields: [ {name: 'name', type: 'string'}, {name: 'age', type: 'int'} ] }); // 定义一个storeExt.define('MyApp.

ExtJs笔记

1.Ext简介.Extjs是一个Ajax框架,是一个用javascript写的,用于在客户端创建丰富多彩的web应用程序界面.ExtJs可以用来开发RIA(Rich Internet Application,富互联网应用系统)的Ajax应用框架.ExtJs是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架.因此,可以把ExtJs用在.Net,Java.Php等各种开发语言开发的应用中2.Ext库文件说明                       

ExtJs学习笔记(1)---ExtJs安装及其使用

从官网下载了ExtJs的3.2版本的SDK,包含了代码依赖的详细说明.文档.范例和其他文件.其中,adapter和resources文件是Ext正常运行所必须的,其他的仅在开发过程中使用到. Adapter:支持把Ext和其他代码库一同使用的文件 build:用于自定义构建ext-all.js的文件 docs:文档中心(仅当运行在服务器上时能够正常访问) examples:大量令人印象深刻富有洞察力的范例 resources:Ext依赖的文件,例如CSS和图片 source:ext的所有代码 在

[ExtJS学习笔记]第六节 Extjs的类系统Class System命名规则及定义和调试

本文地址: http://blog.csdn.net/sushengmiyan/article/details/38479079 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- 翻译来源  Sencha Cmd官方网站:    http:

[ExtJS学习笔记]第五节 使用fontawesome给你的web应用增加友好图标

本文地址: 本文作者:sushengmiyan -------------------------------------------------资源链接-------------------------------------------------------- FontAwesome glyph编码:http://fortawesome.github.io/Font-Awesome/cheatsheet/ 使用图标美化按钮: http://blog.csdn.net/jfok/articl

[ExtJS学习笔记]第七节 Extjs的组件components及其模板事件方法学习

本文地址:http://blog.csdn.net/sushengmiyan/article/details/38487519 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- 翻译来源  Sencha Cmd官方网站: http://ww

[学习笔记]欢迎来到extjs

本文地址: 本文作者:sushengmiyan 翻译来源:http://docs.sencha.com/extjs/5.0.0/getting_started/welcome_to_extjs.html 这篇指引提供了一个简单的ext js介绍,我们会从讨论建立一个简单的hello world例子开始我们的体验.我们会接着讲解在extjs中代码是怎样的结构,这个指导同样也会包括一些其他可以使用的资源的链接,所以,你应该尽可能的多看一些来提升你对ext的认知程度. helloworld -----

[ExtJS学习笔记]第十节 Extjs5新增特性之ViewModel和DataBinding

本文地址:http://blog.csdn.net/sushengmiyan/article/details/38612721 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- 翻译来源:http://docs.sencha.com/ext

[ExtJS学习笔记]第九节 Extjs5的mvc与mvvm框架结构简介

本文地址:http://blog.csdn.net/sushengmiyan/article/details/38537431 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- 翻译来源:http://docs.sencha.com/ext