ExtJS4.2学习(17)表单基本输入控件Ext.form.Field

Ext.form.Field是所有表单输入控件的基类，其他的输入控件都是基于Ext.form.Field扩展得来的。
Ext.form.Field中定义了输入控件通用的属性和功能函数，这些通用的属性和功能函数大致分为3大类：页面显示样式、控件参数配置和数据有效性检验。我们先来看看表单输入控件可以使用的校验显示方式。默认情况下，这些输入控件会监听blur事件，如果数据校验失败，就会根据msgTarget中的设置显示错误信息。通常，msgTarget会被设置为qtip，即使用QuickTip显示错误信息，也可以将msgTarget设置为title、side、under中的一种，这样错误信息就会以指定的方式显示。因为所有的输入控件都继承自
Ext.form.Field，所以我们可以为任何一个表单输入控件进行这些设置，改变它们的错误信息显示方式。具体代码如下：






01 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>






02 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "h t t p://www.w3.org/TR/html4/loose.dtd">






03 <html>






04 <head>






05 <meta
http-equiv="Content-Type"
content="text/html; charset=UTF-8">






06 <title>Hello Extjs4.2</title>






07 <link
href="../../ExtJS4.2/resources/ext-theme-neptune/ext-theme-neptune-all.css"
rel="stylesheet">






08 <script
src="../../ExtJS4.2/ext-all.js"></script>






09 <script
src="../../ExtJS4.2/locale/ext-lang-zh_CN.js"></script>






10 <script
type="text/javascript">






11 Ext.onReady(function(){






12                                                          






13     // HtmlEditor需要这个






14     Ext.tip.QuickTipManager.init();






15                                                          






16     var field1 = new Ext.form.TextField({






17         fieldLabel: ‘qtip错误显示方式‘,






18         msgTarget: ‘qtip‘,






19         allowBlank: false






20     });






21     var field2 = new Ext.form.TextField({






22         fieldLabel: ‘title错误显示方式‘,






23         msgTarget: ‘title‘,






24         allowBlank: false






25     });






26     var field3 = new Ext.form.TextField({






27         fieldLabel: ‘side错误显示方式‘,






28         msgTarget: ‘side‘,






29         allowBlank: false






30     });






31     var field4 = new Ext.form.TextField({






32         fieldLabel: ‘under错误显示方式‘,






33         msgTarget: ‘under‘,






34         allowBlank: false






35     });






36                                                          






37     var form = new Ext.form.FormPanel({






38         title: ‘表单输入控件演示‘,






39         frame: true,






40         fieldDefaults:{






41             labelAlign:‘right‘, //文本对齐方式






42             labelWidth:150






43         },






44         items: [field1, field2, field3, field4],






45         renderTo: ‘form‘






46     });






47                                                          






48                                                          






49     form.getForm().isValid();





50 });






51 </script>






52 </head>






53 <body>






54 <h1>我的ExtJS4.2学习之路</h1>





55 <hr
/>





56 作者：束洋洋






57 开始日期：2013年12月11日21:01:19






58 <h2>深入浅出ExtJS之表单基本输入控件Ext.form.Field</h2>






59 <div
id="form"></div>






60 </body>






61 </html>

qtip方式：默认显示方式，显示为悬浮框提示错误文字；
title方式：类似HTML超链接中设置的title;
side方式：输入框后出现错误图标，鼠标放上去会显示错误信息;
under方式：文本框下方出现错误提示图标和文字.
接下来会对上节中出现的控件一一作介绍，本篇先说说文本输入控件(Ext.form.TextField)、多行文本输入控件（Ext.form.TextArea）和日期输入控件(Ext.form.DateField)

代码如下，相关属性已经在注释中写明。

预览源代码

打印





01 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>





02 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "h t t p://www.w3.org/TR/html4/loose.dtd">





03 <html>





04 <head>





05 <meta
http-equiv="Content-Type"
content="text/html; charset=UTF-8">





06 <title>Hello Extjs4.2</title>





07 <link
href="../../ExtJS4.2/resources/ext-theme-neptune/ext-theme-neptune-all.css"
rel="stylesheet">





08 <script
src="../../ExtJS4.2/ext-all.js"></script>





09 <script
src="../../ExtJS4.2/locale/ext-lang-zh_CN.js"></script>





10 <script
type="text/javascript">






11 Ext.onReady(function(){





12                





13     var field = new Ext.form.TextField({





14         fieldLabel: ‘empty‘, //输入控件前显示名称





15         allowBlank: false, //是否允许为空





16         emptyText:‘空‘, //没有输入任何内容提示文字





17         maxLength:50, //输入最大字符串长度





18         minLength:10 //输入最小字符串长度





19     });





20                    





21     var fieldTextArea = new Ext.form.TextArea({





22         width:200,





23         grow:true, //会根据输入内容自动修改自身高度





24         preventScrollbars:true, //防止出现滚动条，如果内容超出显示范围就会自动隐藏





25         fieldLabel:‘empty‘,





26         allowBlank:false,





27         emptyText:‘空‘,





28         maxLength:50,





29         minLength:10





30     });





31                    





32     var fieldDate = new Ext.form.DateField({





33         fieldLabel:‘日期‘,





34         emptyText:‘请选择‘,





35         format:‘Y-m-d‘,





36         disabledDays:[0,6] //禁止选择的日期





37     });





38                





39     var form = new Ext.form.FormPanel({





40         title: ‘表单输入控件演示‘,





41         width:500,





42         frame: true,





43         items: [field,fieldTextArea,fieldDate],





44         renderTo: ‘form‘





45     });





46 });





47 </script>





48 </head>





49 <body>





50 <h1>我的ExtJS4.2学习之路</h1>





51 <hr
/>





52 作者：束洋洋





53 开始日期：2013年12月11日21:13:50





54 <h2>深入浅出ExtJS之文本输入控件Ext.form.TextField</h2>





55 <div
id="form"></div>





56 </body>





57 </html>

ExtJS4.2学习(17)表单基本输入控件Ext.form.Field,布布扣,bubuko.com

时间： 2024-12-25 11:59:52

ExtJS4.2学习(17)表单基本输入控件Ext.form.Field的相关文章

ExtJS4.2学习(17)表单基本输入控件Ext.form.Field（转）

鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-12-11/189.html ------------------------------------------------------------------------------------------- Ext.form.Field是所有表单输入控件的基类,其他的输入控件都是基于Ext.form.Field扩展得来的. Ext.form.Field

Extjs4——表单与输入控件

1.表单的简单形式: var form = new Ext.form.FormPanel({ title: 'form', defaultType: 'textfield', buttonAlign: 'center', frame: true, width: 220, fieldDefaults: { labelAlign: 'right', labelWidth: 70 }, items: [{ fieldLabel: '文本框' }], buttons: [{ text: '按钮' }]

深入浅出ExtJS 第四章 表单与输入控件(未完)

1 4.1 制作表单 2 var form = new Ext.form.FormPanel({ 3 title:'form', 4 defaultType:'textfield', 5 buttonAlign:'center', 6 frame:true, 7 width:220, 8 fieldDefaults:{ 9 labelAlign:'right', 10 labelWidth:70 11 }, 12 tiems:[{ //子组件; 13 fieldLabel:'文本框' //文本框

FineUI之使用SQL脚本从数据库表中生成相应的输入控件

在WEB开发时,经常需要依据数据库表中的字段建立相应的输入控件,来获取输入的数据.每次都需要按字段来敲,显然太低效,而且容易出错.这里提供一个SQL脚本生成相应输入控件的方法. USE DBDemo DECLARE @TEMP_TABLE_NAME NVARCHAR(512) DECLARE @WIDTH NVARCHAR(50) SET @TEMP_TABLE_NAME='Stuff' SET @WIDTH='200' SELECT '<f:'+TOKEN+' runat="server

Xceed WPF表单输入控件Xceed Editors for WPF 免费下载及介绍

Xceed Editors for WPF 是一款包含12种功能强大的WPF编辑控件,用户输入控件,每个控件都具有多种风格主题,包含:日期选择控件.复选框.改进的TextBox.数字输入框.值范围输入框等. 具体功能: DatePicker/Calendar:日期选择控件 MaskedTextBox:为输入文本指定一种标记格式 CheckBox:提供了多种风格的复选框,不像传统的WPF复选框 AutoSelectTextBox:当控件具有焦点时内容被选择 ValueRangeTextBox:添加

FineUI之使用SQL脚本从数据库表中生成对应的输入控件

在WEB开发时.常常须要根据数据库表中的字段建立对应的输入控件,来获取输入的数据.每次都须要按字段来敲,显然太低效.并且easy出错.这里提供一个SQL脚本生成对应输入控件的方法. USE DBDemo DECLARE @TEMP_TABLE_NAME NVARCHAR(512) DECLARE @WIDTH NVARCHAR(50) SET @TEMP_TABLE_NAME='Stuff' SET @WIDTH='200' SELECT '<f:'+TOKEN+' runat="serv

Duilib 学习源码系列1-创建控件

好了,昨天研究出了为什么加载xml结束以后我在自己新建一个控件位置不能调整,原来要先add才能调属性. 本来这个是昨天的任务,虽然这块内容是前天就看完的,权当边写边复习吧. 上一篇提到 <VerticalLayout name="window" bkcolor="#FFFFFFFF" bkcolor2="#FFAAAAA0" bkcolor3="#00000000"> 代表了一个控件字符串; 上次忘记说了 及时经过

【WPF学习】第十九章 控件类

原文:[WPF学习]第十九章 控件类 WPF窗口充满了各种元素,但这些元素中只有一部分是控件.在WPF领域,控件通常被描述为与用户交互的元素--能接收焦点并接受键盘或鼠标输入的元素.明显的例子包括文本框和按钮.然而,这个区别有时有些模糊.将工具提示视为控件,因为它根据用户鼠标的移动显示或消失.将标签视为控件,因为它支持记忆码(mnemonics,将焦点转移到相关控件快捷键). 所有控件都继承自System.Windows.Control类,该类添加了一小部分基本的基础结构: 设置控件内容对齐方式

WebBrowser无法显示招商银行密码输入控件的问题

本文由CharlesSimonyi发表于CSDN博客:http://blog.csdn.net/charlessimonyi/article/details/30479131转载请注明出处 之前就看到CSDN论坛上有人提问,自己写的程序中的WebBrowser打开招商银行的登录页面后(https://pbnj.ebank.cmbchina.com/CmbBank_GenShell/UI/GenShellPC/Login/Login.aspx),无法显示密码输入控件,但是在IE中可以正常显示. 后