Home > Developer > Web Develop
Input Box TextField
A Basic text Box form item. You can replace the traditional text input box directly, or as a base class for many complex basic controls ({such as @link Ext.form.field.TextArea}) and Ext.form.field.ComboBox. Supports empty table item placeholders (see EMPTYTEXT).
1. Example:
Add two input boxes to a Formpanel form
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "UTF-8"><title>Insert Title here</title><Linkrel= "stylesheet"type= "Text/css"href=".. /ext-js-4.2.1/resources/css/ext-all.css " /><Scripttype= "Text/javascript"src=".. /ext-js-4.2.1/ext-all.js "></Script><Scripttype= "Text/javascript"src=".. /ext-js-4.2.1/locale/ext-lang-zh_cn.js "></Script><Scripttype= "Text/javascript">Ext.onready (function() { //Initialize the Ext:qtip property in a tagExt.QuickTips.init (); Ext.form.Field.prototype.msgTarget= 'under'; //User Name Input vartxtUserName= NewExt.form.TextField ({width: -, Allowblank:false, MaxLength: -, Name:'username', Fieldlabel:'User name', Blanktext:'Please enter user name', Maxlengthtext:'user name input cannot exceed 20 characters' }); //Password Input vartxtpwd= NewExt.form.TextField ({width: -, Allowblank:false, MaxLength: -, Name:'Password', InputType:'Password', Fieldlabel:'Password', Blanktext:'Please enter your password', Maxlengthtext:'password input cannot exceed 20 characters' }); varform= NewExt.form.FormPanel ({frame:true, Title:'Form Title', Style:'margin:10px',//draggable:true,//Can be draggedHTML:'<div style = "padding:10px" > here is the form content </div>', items: [Txtusername,txtpwd]}); varwin= NewExt.window ({title:'Form window', Width: -, Height: $, draggable:true, HTML:'<div> Here is the contents of the form </div>', resizable:true, modal:true, closable:true, maximizable:true, minimizable:true, items:form}); Win.show (); }); </Script></Head><Body> <!--Description: (1) Ext.QuickTips.init (): The role of Quicktips is to initialize the Ext:qtip attribute in the tag and give it the action to display the hint. (2) Ext.form.Field.prototype.msgTarget = ' side ': TextField is prompted by: at the right edge, as shown, the parameter enumeration value is "Qtip", "title", "under", "Side", ID (element ID ), side way with more, red exclamation mark on the right, the mouse up error prompts. (3) var txtusername = new Ext.form.TextField (): Creates a new TextField text box object. (4) Allowblank:false: The text box is not allowed to be empty. (5) Maxlength:20: The maximum length of a text box is 20 characters, and you can continue typing when more than 20 characters are available, but Ext will prompt you for a warning message. (6) Name: ' Password ': The name of the form, which is more important because when we interact with the server, the service side is the parameter value that receives the post by name. (7) Fieldlabel: ' username ': text caption, such as "User name", "Password" and so on. (8) Blanktext: ' Please enter user name ': prompt when non-null checksum is not passed. (9) Maxlengthtext: ' User cannot exceed 20 characters ': Prompt message when maximum length check is not passed. -</Body></HTML>
2.:
3. Common Properties and methods:
(1) Properties:
Allowblank: null is allowed, default is True
Blanktext: Prompt message displayed after null validation fails
Emptytext: The information displayed by default in an empty field
Grow: field is automatically stretched and shrunk, default is False
Growmin: Minimum width of contraction
Growmax: Maximum width of stretch
InputType: Field type: Default to Text
Maskre: Regular expression for filtering mismatched character input
MaxLength: Maximum length of field allowed input
Maxlengthtext: Message displayed after maximum length verification failure
MinLength: The minimum length that the field allows for input
Minlengthtext: Prompt message displayed after minimum length verification failure
(2) Method:
IsValid (): Returns whether the value of the table item is currently available. Note :disabled form items are always considered available. Returns True if the value is available, returning false.The TextField of EXTJS study notes
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
