继上一节内容,我们在表单里加了个两个文本框。如下所示代码区的第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的Regex的验证属性分两种情况,一种是只有红色提示框;另一种是在提示框边会出现一个类似批注的提示信息,不过在页面加载时要加上Ext.QuickTips.init();提示框才能正常显示出来。 特别提示:在属性regex后要用 ...
Extjs如何获取文本框的值Extjs如何获取文本框的值Extjs如何获取文本框的值Extjs如何获取文本框的值Extjs如何获取文本框的值Extjs如何获取文本框的值
NULL 博文链接:https://huiqinbo.iteye.com/blog/2219592
NULL 博文链接:https://huiqinbo.iteye.com/blog/2216788
ExtJS4官方指南:数据Data简体中文版.pdf
NULL 博文链接:https://huiqinbo.iteye.com/blog/2219418
ExtJS4官方指南:MVC架构简体中文版宣贯.pdf
NULL 博文链接:https://huiqinbo.iteye.com/blog/2217105
ExtJS4官方指南:MVC架构简体中文版归类.pdf
解决了应用ExtJS进行界面开发时, 文本框后带单位的问题
ExtJS 4 官方手册:应用架构设计 01 简体中文版.doc
ExtJS4官方手册:应用架构设计01简体中文版.doc
NULL 博文链接:https://huiqinbo.iteye.com/blog/2217092
extjs教程,extjs教程,extjs教程,extjs教程,extjs教程,extjs教程,extjs教程,extjs教程,extjs教程,extjs教程
ExtJs5 去掉textfield边框
Extjs教程源码 介: ***************第一部分基础知识**************** 第一讲: EXTJS4.0概述和HelloWorld程序 第二讲: EXTJS4.0的新特性 第三讲: EXTJS4.0数据模型——Model 第四讲: EXTJS4.0的数据代理——Proxy ...