Extjs 的学习

extjs中textfield的关于印证的一些属性设置

   1: ExtJS的textField 本身具备验证输入值的一些属性和方法,这些属性和方法都在config参数中进行配置。 
1、是否允许空值 
allowBlank : Boolean 
如果是true,则允许,否则不允许,默认是true。 
blankText : String 
如果allowBlank 设置为true,并且那个textField的值为空,则会显示blankText属性的字符串以给出错误提示。

2:最长字符和最短字符 
maxLength : Number 
最长字符(可以达到) 
maxLengthText : String 
超出设定的最长字符时,会显示maxLengthText属性的字符串以给出错误提示。 
minLength : Number 
最短字符(可以达到) 
minLengthText : String 
不足设定的最短字符时,会显示minLengthText属性的字符串以给出错误提示。

3:正则表达式 
regex : RegExp 
设定正则表达式,eg:/^[abc]$/ 
regexText : String 
输入值违反正则表达式时,会显示regexText属性的字符串以给出错误提示。
可以通过方法isValid( Boolean preventMark ) : Boolean 来得知输入值是否满足所有的限制要求。 
注意: 
所有的错误提示,分两种,一种是在textField下底框上加上红色波浪线,另一种是显示相应的错误提示字符串,同时给出红色波浪线。 
后一种方法需要调用Ext.QuickTips.init();才能生效,默认下,只有前一种方式。

Sample: 
Ext.onReady(function(){ 
var _win=new Ext.Window({ 
   title : "找回密码", 
  width : 180, 
  layout:"form", 
  labelWidth:60, 
  items:[{ 
   xtype:"textfield", 
   fieldLabel:"你的姓名" , 
   allowBlank:false, 
   blankText :‘姓名不能为空‘, 
   minLength :2 , 
   minLengthText : "姓名最少2个字符", 
   maxLength : 4 , 
   maxLengthText :"姓名至多4个字符", 
   width : 80, 
   regex : /^[abc]{2,4}$/, 
   regexText : "只能输入abc" 
   }], 
   buttons:[ 
     { 
      text:‘下一步‘ 
     },{ 
      text:‘取消‘ 
     }   
   ] 
  }); 
Ext.QuickTips.init(); 
  _win.show(); 
});

时间: 2024-12-17 03:51:56

Extjs 的学习的相关文章

ExtJS MVC学习手册 1

开发环境: ExtJS4.2 eclipse indigo 开发步骤说明 这次主要使用extjs4的mvc模式创建viewport.籍此初步了解mvc模式的结构. 下图为项目结构: 重点是app的目录结构: 其中controller.model.store.view一般来说是必须存在的目录. app.js是应用的引导页.需要在首页中显式调用. 如下是index.jsp的代码: 1: <%@ page language="java" pageEncoding="utf-8

ExtJS 4学习

  主要是选自<Ext js 权威指南>描述的是Extjs4的版本 模板代码如下:(略有改动,原因是当前文件目录下放置了extjs的包) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <link

ExtJS MVC学习手记 2

开发环境 eclipse(indigo) ExtJS4.0 开发目标 使用store.model和controller创建菜单树 开发步骤 之前我们已经建立了一个MVC的项目框架.现在要做的就是在这个基础上给项目添加一个左侧菜单. 首先,在/app/中定义一个菜单视图类TreeMenu.js: Ext.define('demo.view.TreeMenu', { extend: 'Ext.tree.Panel', alias: 'widget.treemenu', title: '系统菜单',

Extjs 4学习2

主要学习采自:http://www.ishowshao.com/blog/2012/06/19/extjs-4-getting-started/

ExtJS视频学习笔记

JS的面向对象编程Ajax熟练JavaScript设计模式征服Ajax Web 2.0开发技术详解(附光盘) 百度,谷歌,开源的论坛官方的demo和API文档 ReaderExt.data.reader.Reader 读取器的根类Ext.data.reader.Json Json格式的读取器Ext.data.reader.Array 扩展Json的Array读取器Ext.data.reader.Xml Xml格式的读取器 WriterExt.data.writer.Writer Ext.data

Ext JS 6学习文档–第1章–ExtJS入门指南

Ext JS 入门指南 前言 本来我是打算自己写一个系列的 ExtJS 6 学习笔记的,因为 ExtJS 6 目前的中文学习资料还很少.google 搜索资料时找到了一本国外牛人写的关于 ExtJS 6 的电子书 [Ext JS 6 By Example].这份资料在 PACKT 上卖 35.99 刀的,当然了万能的 google 还是帮我下载到了 PDF 文档.大概看了一下,讲的很详细,例子也比较简单,容易理解,现我准备利用工作之余翻译这份文档,为自己学习加深理解,也希望能帮助更多的人学习.

学习ExtJS的grid布局

这是之前学习ExtJS布局的时候我导师让我重点熟悉的内容.之后会发一个最近写的结合MVC项目的grid布局的案例. 上一篇关于ExtJS的学习资料什么的都已经更在上一篇了,这里只是对一些代码的记录. [学习资料](ExtJS4中的Grid.Tree.Form)http://www.cnblogs.com/niejunchan/p/4998512.html [效果] Array_Grid Tree_Grid [代码] [Array_Grid的代码] <!DOCTYPE html> <htm

DHTMLTree、Dtree和Ztree的学习使用

一.DHTMLTree是树菜单,允许我们快速开发界面优美,基于Ajax的javascript库.她允许在线编辑,拖拽,三种状态(全选.不选.半选),复选框等模式.同时在加载大数据量的时候,仍然可以保持非常高效的速度. DHTMLTree是一个功能丰富的第三方JavaScript树菜单,它能够使用户快速添加一个外观非常漂亮的,基于Ajax技术的网页上的分层树.树视图支持在线节点编辑.现行的拖放功能.三态复选框以及更多功能.由于特殊的技术的使用,使dhtmlxTree能够快速有效的加载结构庞大的树.

ExtJs4学习(一):正确认识ExtJs4

认识ExtJs 1.Javat能用ExtJs吗? 它是展现层的技术,与JS,HTML,CSS有关.至于server端是.Net,还是PHP等无关. 2.ExtJs适合什么样的项目? 依照官方的说法,ExtJs是给你拿来做B/S的桌面应用程序的,并不适合做门户站点.我个人理解,ExtJs比較适合做须要大量复杂界面布局和交互的信息管理系统(MIS). 3.ExtJs效率不行,好慢...? 确实,ExtJs做的复杂布局和交互的页面,在IE6,7,8下非常慢,在IE9下也不是非常理想,但在Chrome,