继上一节内容，我们在表单里加了个两个文本框。如下所示代码区的第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 |
3. 效果如下：
![无废话ExtJs 教程五[文本框：TextField]](http://img.e-com-net.com/image/product/6704e4c2c9bc464eac13c57f20233fb9.jpg)