无废话ExtJs 教程五[文本框：TextField]

niehanmin

2015-05-27

继上一节内容，我们在表单里加了个两个文本框。如下所示代码区的第42行位置，items: [txtusername, txtpassword]。

1. index.jsp代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>    
    <title>My JSP 'index.jsp' starting page</title>

	<!--ExtJs框架开始-->
	<script type="text/javascript" src="Ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="Ext/ext-all.js"></script>
	<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />
	<!--ExtJs框架结束-->	
	<!-- 	 
	<script type="text/javascript" src="study/helloWorld.js"></script>
	<script type="text/javascript" src='study/window.js'></script>
	<script type="text/javascript" src='study/formPanel.js'></script>
	-->
	<!--调用/study/window.js 实现窗体：Window组件  -->
	<script type="text/javascript" src='study/textField.js'></script>
	
  </head>  
  <body>
  <br>
  </body>
</html>

2. textField.js 代码如下：

Ext.onReady(function(){
	var username = new Ext.form.TextField({
		//style:'margin:25px',
		width:140,
		allowBlank:false,
		blankText:'Please type your name.',
		fieldLabel:'username',
		height:20,
		name:'username',
		maxLength:20,
		maxLengthText:'The user name cannot be more than 20 charactor'
	});
	
	var password = new Ext.form.TextField({
		width:140,
		fieldLabel:'Password',
                inputType:'password',
		blankText:'Please type your password',
		maxLength:10,
		maxLengthText:'The password cannot be more than 10 charactor'
	});
	
	var form = new Ext.FormPanel({
		title:'formTitle',
        style:'margin:10px',
		//html:'This is the form part..',
		frame:true,
		//width:360,
		//height:160,
		items:[username,password]
		
	});
	new Ext.Window({
		title:'WindowTitle',
		modal:true,
		html:'This is the window part..',
		width:477,
		height:377,
		minimizable:true,
		maximizable:true,
		items:form
	}).show();
});

以上的textField.js 还可以这样来写：

Ext.onReady(function(){
	//Window
	new Ext.Window({
		title:'WindowTitle',
		modal:true,
		html:'This is the window part..',
		width:477,
		height:377,
		minimizable:true,
		maximizable:true,
		items:[
			//Form 
			new Ext.FormPanel({
				title:'formTitle',
				style:'margin:10px',
				html:'<div>This is the form part..</div>',
				frame:true,
				items:[
					//Username input
					new Ext.form.TextField({
						//style:'margin:25px',
						width:140,
						allowBlank:false,
						blankText:'Please type your name.',
						fieldLabel:'username',
						height:20,
						name:'username',
						maxLength:20,
						maxLengthText:'The user name cannot be more than 20 charactor'
					}),
					//Password input
					new Ext.form.TextField({
						width:140,
						fieldLabel:'Password',
						blankText:'Please type your password',
						inputType:'password',
						maxLength:10,
						maxLengthText:'The password cannot be more than 10 charactor'
					})
				]
			})]
	}).show();
});

也就是说items 的值可以直接是组件引用的值，也可以是具体的组件对象！

说明1：

(1)Ext.QuickTips.init()：QuickTips的作用是初始化标签中的Ext:Qtip属性，并为它赋予显示提示的动作。
(2)Ext.form.Field.prototype.msgTarget = 'side'：TextField的提示方式为：在右边缘，如上图所示，参数枚举值为"qtip","title","under","side",id(元素id)，
side方式用的较多，右边出现红色感叹号，鼠标上去出现错误提示。
(3)var txtusername = new Ext.form.TextField():创建一个新的TextField文本框对象。
(4)allowBlank: false：不允许文本框为空。
(5)maxLength: 20：文本框的最大长度为20个字符，当超过20个字符时仍然可以继续输入，但是Ext会提示警告信息。
(6)name: 'password'：表单名称，这个比较重要，因为我们在与服务器交互的时候，服务端是按name接收post的参数值。
(7)fieldLabel: '用户名'：文本框前面显示的文字标题，如“用户名”，“密码”等。
(8)blankText: '请输入用户名'：当非空校验没有通过时的提示信息。
(9) maxLengthText: '用户不能超过20个字符'：当最大长度校验没有通过时的提示信息。

说明2：

textfield组件常用的：属性、方法及事件

属性

allowBlank：是否允许为空，默认为true
blankText：空验证失败后显示的提示信息
emptyText：在一个空字段中默认显示的信息
grow：字段是否自动伸展和收缩，默认为false
growMin：收缩的最小宽度
growMax：伸展的最大宽度
inputType：字段类型：默认为text
maskRe：用于过滤不匹配字符输入的正则表达式
maxLength：字段允许输入的最大长度
maxLengthText：最大长度验证失败后显示的提示信息
minLength：字段允许输入的最小长度
minLengthText：最小长度验证失败后显示的提示信息

3. 效果如下：

无废话ExtJs 教程五[文本框：TextField]

html代码

安科网

无废话ExtJs 教程五[文本框：TextField]

niehanmin

niehanmin

相关推荐

前端如何实现.md文件转换成.html文件

10个对Web开发人员有用的HTML文件上传技巧

手把手教你搭建Vue服务端渲染项目

快速指南：如何创建基于Python的爬虫

HTML知识点（一）

再见HTML ! 用纯Python就能写一个漂亮的网页

在html页面中引入另一个html页面

用urllib库几行代码实现最简单爬虫

JavaScript HTML DOM 事件

HTML 语义

如何理解HTML语义化的？

python之发送邮件----html + 附件

css基础教程

C# 使用 WebBrowser 实现 HTML 转图片功能

JavaScript 事件

Java学习（十二）

结合puppeteer和egg.js搭建html转pdf或png的node中间层服务。

JavaScript的加载顺序

html的基本标签

Html常用代码

niehanmin