JavaScript DHTML/Ext JS/TextBox
Содержание
Add a TextField to a window by setting the xtype
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <script type="text/javascript">
Ext.onReady(function(){
var w = new Ext.Window({ items:[ { xtype: "textfield", fieldLabel: "First Name"}, new Ext.form.TextField({fieldLabel: "Surname"}) ] }); w.show();
}); </script> <body>
</body> </html>
</source>
Add text box to a window and set the width
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() {
var myWin = new Ext.Window({ height : 220, width : 230, bodyStyle : "padding: 5px", layout : "form", labelWidth : 50, defaultType : "field", items : [ { fieldLabel : "Name", width : 110 }, { fieldLabel : "Age", width : 25 } ] }); myWin.show();
}); </script>
</body> </html>
</source>
Not-allow-blank field
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() {
new Ext.FormPanel({ url: "your.php", renderTo: Ext.getBody(), frame: true, title: "Title", width: 250, items: [ { xtype: "textfield", fieldLabel: "Title", name: "title", allowBlank: false }, { xtype: "datefield", fieldLabel: "Released", name: "released" } ] });
}); </script>
</body> </html>
</source>
Preset value on a textbox
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head>
<body> <script type="text/javascript"> /*!
* Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/license */
Ext.onReady(function(){
Ext.QuickTips.init(); // turn on validation errors beside the field globally Ext.form.Field.prototype.msgTarget = "side"; var bd = Ext.getBody(); /* * Form 2 */ bd.createChild({tag: "h2", html: "Form 2 - Adding fieldsets"}); var fsf = new Ext.FormPanel({ labelWidth: 75, // label settings here cascade unless overridden url:"save-form.php", frame:true, title: "Simple Form with FieldSets", bodyStyle:"padding:5px 5px 0", width: 350, items: [{ xtype:"fieldset", checkboxToggle:true, title: "User Information", autoHeight:true, defaults: {width: 210}, defaultType: "textfield", collapsed: true, items :[{ fieldLabel: "First Name", name: "first", allowBlank:false },{ fieldLabel: "Last Name", name: "last" },{ fieldLabel: "Company", name: "company" }, { fieldLabel: "Email", name: "email", vtype:"email" } ] },{ xtype:"fieldset", title: "Phone Number", collapsible: true, autoHeight:true, defaults: {width: 210}, defaultType: "textfield", items :[{ fieldLabel: "Home", name: "home", value: "(888) 555-1212" },{ fieldLabel: "Business", name: "business" },{ fieldLabel: "Mobile", name: "mobile" },{ fieldLabel: "Fax", name: "fax" } ] }], buttons: [{ text: "Save" },{ text: "Cancel" }] }); fsf.render(document.body);
}); </script> </div> </body> </html>
</source>
Set min and max length for a field
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() {
Ext.QuickTips.init(); var formPanelItems =[
{ fieldLabel : "Alpha only", allowBlank : false, emptyText : "This field is empty!", maskRe : /[a-z]/i, msgTarget : "under", minLength : 3, maxLength : 7 }
]; var fp = new Ext.form.FormPanel({
renderTo : Ext.getBody(), width : 400, title : "Title here", height : 170, frame : true, bodyStyle : "padding: 5px", monitorValid : true, monitorPoll : 50, labelWidth : 125, defaultType : "textfield", defaults : { msgTarget : "side", anchor : "-20" }, items : formPanelItems,
});
}); </script>
</body> </html>
</source>
Set validation type for a textfield
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() {
Ext.form.VTypes.nameVal = /^([A-Z]{1})[A-Za-z\-]+ ([A-Z]{1})[A-Za-z\-]+/; Ext.form.VTypes.nameMask = /[A-Za-z\- ]/; Ext.form.VTypes.nameText = "In-valid."; Ext.form.VTypes.name = function(v){ return Ext.form.VTypes.nameVal.test(v); }; new Ext.FormPanel({ url: "your.php", renderTo: Ext.getBody(), frame: true, title: "Title", width: 250, items: [ { xtype: "textfield", fieldLabel: "Title", name: "title", vtype: "name" } ] });
}); </script>
</body> </html>
</source>
Set value for a text field
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() {
var myform = new Ext.FormPanel({ url: "your.php", renderTo: Ext.getBody(), frame: true, title: "Title", width: 250, items: [ { xtype: "textfield", fieldLabel: "Title", name: "title", allowBlank: false } ] }); myform.getForm().findField("title").setValue("new value");
}); </script>
</body> </html>
</source>
TextField enter key action listener
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() {
var myform = new Ext.FormPanel({ url: "your.php", renderTo: Ext.getBody(), frame: true, title: "Title", width: 250, items: [ { xtype: "textfield", fieldLabel: "Title", name: "title", allowBlank: false, listeners: { specialkey: function(f,e){ if (e.getKey() == e.ENTER) { alert("about to submit"); myform.getForm().submit(); } } } } ] });
}); </script>
</body> </html>
</source>