JavaScript DHTML/Ext JS/Form Fields
Содержание
- 1 Building new types of fields quickly
- 2 Call reset method to reset all fields on a form
- 3 Collapsed fieldset
- 4 Collapsible fieldset
- 5 Form field: allowBlank
- 6 Get form button by id
- 7 Indicate field as local
- 8 Load xml data for a Form
- 9 Set fieldset height to auto
- 10 Set field to typeahead to true
- 11 Set message target to under
- 12 Spotlight Demo: restrict input to a particular element by masking all other page content
- 13 The Form demonstrates the use of radio buttons grouped by name being set by the value of the derived "rating" field.
Building new types of fields quickly
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<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>
<script type="text/javascript" src="ext-3.0.0/examples/ux/SearchField.js"></script>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<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(){
var ds = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url: "http://extjs.ru/forum/topics-remote.php"
}),
reader: new Ext.data.JsonReader({
root: "topics",
totalProperty: "totalCount",
id: "post_id"
}, [
{name: "postId", mapping: "post_id"},
{name: "title", mapping: "topic_title"},
{name: "topicId", mapping: "topic_id"},
{name: "author", mapping: "author"},
{name: "lastPost", mapping: "post_time", type: "date", dateFormat: "timestamp"},
{name: "excerpt", mapping: "post_text"}
]),
baseParams: {limit:20, forumId: 4}
});
// Custom rendering Template for the View
var resultTpl = new Ext.XTemplate(
"<tpl for=".">",
"<div class="search-item">",
"<h3><span>{lastPost:date("M j, Y")}<br />by {author}</span>",
"<a href="http://extjs.ru/forum/showthread.php?t={topicId}&p={postId}" target="_blank">{title}</a></h3>",
"<p>{excerpt}</p>",
"</div></tpl>"
);
var panel = new Ext.Panel({
applyTo: "search-panel",
title:"Forum Search",
height:300,
autoScroll:true,
items: new Ext.DataView({
tpl: resultTpl,
store: ds,
itemSelector: "div.search-item"
}),
tbar: [
"Search: ", " ",
new Ext.ux.form.SearchField({
store: ds,
width:320
})
],
bbar: new Ext.PagingToolbar({
store: ds,
pageSize: 20,
displayInfo: true,
displayMsg: "Topics {0} - {1} of {2}",
emptyMsg: "No topics to display"
})
});
ds.load({params:{start:0, limit:20, forumId: 4}});
});
</script>
<div style="width:600px;" id="search-panel">
</div>
</body>
</html>
Call reset method to reset all fields on a form
<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
}
],
buttons: [
{
text: "Save",
handler: function(){
myform.getForm().submit({
success: function(f,a){
Ext.Msg.alert("Success", "It worked");
},
failure: function(f,a){
if (a.failureType === Ext.form.Action.CONNECT_FAILURE){
Ext.Msg.alert("Failure", "Server reported:"+a.response.status+" "+a.response.statusText);
}
if (a.failureType === Ext.form.Action.SERVER_INVALID){
Ext.Msg.alert("Warning", a.result.errormsg);
}
}
});
}
},
{
text: "Reset",
handler: function(){
myform.getForm().reset();
}
}
]
});
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Collapsed fieldset
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<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>
<!-- Revised from demo code in ext3.0.0 -->
<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";
/*
* Individual checkbox/radio examples
**/
// Using checkbox/radio groups will generally be easier and more flexible than
// using individual checkbox and radio controls, but this shows that you can
// certainly do so if you only need a single control, or if you want to control
// exactly where each check/radio goes within your layout.
var individual = [{
bodyStyle: "padding-right:5px;",
items: {
xtype: "fieldset",
title: "Individual Checkboxes",
autoHeight: true,
defaultType: "checkbox", // each item will be a checkbox
items: [{
xtype: "textfield",
name: "txt-test1",
fieldLabel: "Alignment Test"
}, {
fieldLabel: "Favorite Animals",
boxLabel: "Dog",
name: "fav-animal-dog"
}, {
fieldLabel: "",
labelSeparator: "",
boxLabel: "Cat",
name: "fav-animal-cat"
}, {
checked: true,
fieldLabel: "",
labelSeparator: "",
boxLabel: "Monkey",
name: "fav-animal-monkey"
}]
}
}, {
bodyStyle: "padding-left:5px;",
items: {
xtype: "fieldset",
title: "Individual Radios",
autoHeight: true,
defaultType: "radio", // each item will be a radio button
items: [{
xtype: "textfield",
name: "txt-test2",
fieldLabel: "Alignment Test"
}, {
checked: true,
fieldLabel: "Favorite Color",
boxLabel: "Red",
name: "fav-color",
inputValue: "red"
}, {
fieldLabel: "",
labelSeparator: "",
boxLabel: "Blue",
name: "fav-color",
inputValue: "blue"
}, {
fieldLabel: "",
labelSeparator: "",
boxLabel: "Green",
name: "fav-color",
inputValue: "green"
}]
}
}];
/*
* CheckGroup example
**/
var checkGroup = {
xtype: "fieldset",
title: "Checkbox Groups (initially collapsed)",
autoHeight: true,
layout: "form",
collapsed: true, // initially collapse the group
collapsible: true,
items: [{
xtype: "textfield",
name: "txt-test3",
fieldLabel: "Alignment Test",
anchor: "95%"
}]
};
// combine all that into one huge form
var fp = new Ext.FormPanel({
title: "Check/Radio Groups Example",
frame: true,
labelWidth: 110,
width: 600,
renderTo:"form-ct",
bodyStyle: "padding:0 10px 0;",
items: [
{
layout: "column",
border: false,
// defaults are applied to all child items unless otherwise specified by child item
defaults: {
columnWidth: ".5",
border: false
},
items: individual
},
checkGroup
],
buttons: [{
text: "Save",
handler: function(){
if(fp.getForm().isValid()){
Ext.Msg.alert("Submitted Values", "The following will be sent to the server: <br />"+
fp.getForm().getValues(true).replace(/&/g,", "));
}
}
},{
text: "Reset",
handler: function(){
fp.getForm().reset();
}
}]
});
});
</script>
<div id="form-ct"></div>
</body>
</html>
Collapsible fieldset
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<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>
<!-- Revised from demo code in ext3.0.0 -->
<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";
/*
* Individual checkbox/radio examples
**/
// Using checkbox/radio groups will generally be easier and more flexible than
// using individual checkbox and radio controls, but this shows that you can
// certainly do so if you only need a single control, or if you want to control
// exactly where each check/radio goes within your layout.
var individual = [{
bodyStyle: "padding-right:5px;",
items: {
xtype: "fieldset",
title: "Individual Checkboxes",
autoHeight: true,
defaultType: "checkbox", // each item will be a checkbox
items: [{
xtype: "textfield",
name: "txt-test1",
fieldLabel: "Alignment Test"
}, {
fieldLabel: "Favorite Animals",
boxLabel: "Dog",
name: "fav-animal-dog"
}, {
fieldLabel: "",
labelSeparator: "",
boxLabel: "Cat",
name: "fav-animal-cat"
}, {
checked: true,
fieldLabel: "",
labelSeparator: "",
boxLabel: "Monkey",
name: "fav-animal-monkey"
}]
}
}, {
bodyStyle: "padding-left:5px;",
items: {
xtype: "fieldset",
title: "Individual Radios",
autoHeight: true,
defaultType: "radio", // each item will be a radio button
items: [{
xtype: "textfield",
name: "txt-test2",
fieldLabel: "Alignment Test"
}, {
checked: true,
fieldLabel: "Favorite Color",
boxLabel: "Red",
name: "fav-color",
inputValue: "red"
}, {
fieldLabel: "",
labelSeparator: "",
boxLabel: "Blue",
name: "fav-color",
inputValue: "blue"
}, {
fieldLabel: "",
labelSeparator: "",
boxLabel: "Green",
name: "fav-color",
inputValue: "green"
}]
}
}];
/*
* CheckGroup example
**/
var checkGroup = {
xtype: "fieldset",
title: "Checkbox Groups (initially collapsed)",
autoHeight: true,
layout: "form",
collapsed: true, // initially collapse the group
collapsible: true,
items: [{
xtype: "textfield",
name: "txt-test3",
fieldLabel: "Alignment Test",
anchor: "95%"
}]
};
// combine all that into one huge form
var fp = new Ext.FormPanel({
title: "Check/Radio Groups Example",
frame: true,
labelWidth: 110,
width: 600,
renderTo:"form-ct",
bodyStyle: "padding:0 10px 0;",
items: [
{
layout: "column",
border: false,
// defaults are applied to all child items unless otherwise specified by child item
defaults: {
columnWidth: ".5",
border: false
},
items: individual
},
checkGroup
],
buttons: [{
text: "Save",
handler: function(){
if(fp.getForm().isValid()){
Ext.Msg.alert("Submitted Values", "The following will be sent to the server: <br />"+
fp.getForm().getValues(true).replace(/&/g,", "));
}
}
},{
text: "Reset",
handler: function(){
fp.getForm().reset();
}
}]
});
});
</script>
<div id="form-ct"></div>
</body>
</html>
Form field: allowBlank
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<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>
<!-- Revised from demo code in ext3.0.0 -->
<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>
Get form button by id
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<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>
<!-- Revised from demo code in ext3.0.0 -->
<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.get("mb1").on("click", function(e){
Ext.MessageBox.confirm("Confirm", "Are you sure you want to do that?", showResult);
});
//Add these values dynamically so they aren"t hard-coded in the html
Ext.fly("info").dom.value = Ext.MessageBox.INFO;
Ext.fly("question").dom.value = Ext.MessageBox.QUESTION;
Ext.fly("warning").dom.value = Ext.MessageBox.WARNING;
Ext.fly("error").dom.value = Ext.MessageBox.ERROR;
function showResult(btn){
Ext.example.msg("Button Click", "You clicked the {0} button", btn);
};
function showResultText(btn, text){
Ext.example.msg("Button Click", "You clicked the {0} button and entered the text "{1}".", btn, text);
};
});
</script>
<p>
<b>Confirm</b><br />
Standard Yes/No dialog.
<button id="mb1">Show</button>
</p>
</body>
</html>
Indicate field as local
<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 names = [
["A"],
["B"],
["C"],
["D"]
];
var mySimpleStore = new Ext.data.ArrayStore({
data : names,
fields : ["name"]
});
var combo = {
xtype : "combo",
fieldLabel : "Letter",
store : mySimpleStore,
displayField : "name",
typeAhead : true,
mode : "local"
}
new Ext.Window({
title : "Title here",
height : 100,
layout : "form",
labelWidth : 80,
bodyStyle : "padding: 5px",
items : combo
}).show()
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Load xml data for a Form
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<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>
<!-- Revised from demo code in ext3.0.0 -->
<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
*/
// some data used in the examples
Ext.namespace("Ext.exampledata");
Ext.exampledata.states = [
["AL", "Alabama", "The Heart of Dixie"],
["AK", "Alaska", "The Land of the Midnight Sun"],
["AZ", "Arizona", "The Grand Canyon State"],
["AR", "Arkansas", "The Natural State"],
["CA", "California", "The Golden State"],
["CO", "Colorado", "The Mountain State"],
["CT", "Connecticut", "The Constitution State"],
["DE", "Delaware", "The First State"],
["DC", "District of Columbia", "The Nation"s Capital"],
["FL", "Florida", "The Sunshine State"],
["GA", "Georgia", "The Peach State"],
["HI", "Hawaii", "The Aloha State"],
["ID", "Idaho", "Famous Potatoes"],
["IL", "Illinois", "The Prairie State"],
["IN", "Indiana", "The Hospitality State"],
["IA", "Iowa", "The Corn State"],
["KS", "Kansas", "The Sunflower State"],
["KY", "Kentucky", "The Bluegrass State"],
["LA", "Louisiana", "The Bayou State"],
["ME", "Maine", "The Pine Tree State"],
["MD", "Maryland", "Chesapeake State"],
["MA", "Massachusetts", "The Spirit of America"],
["MI", "Michigan", "Great Lakes State"],
["MN", "Minnesota", "North Star State"],
["MS", "Mississippi", "Magnolia State"],
["MO", "Missouri", "Show Me State"],
["MT", "Montana", "Big Sky Country"],
["NE", "Nebraska", "Beef State"],
["NV", "Nevada", "Silver State"],
["NH", "New Hampshire", "Granite State"],
["NJ", "New Jersey", "Garden State"],
["NM", "New Mexico", "Land of Enchantment"],
["NY", "New York", "Empire State"],
["NC", "North Carolina", "First in Freedom"],
["ND", "North Dakota", "Peace Garden State"],
["OH", "Ohio", "The Heart of it All"],
["OK", "Oklahoma", "Oklahoma is OK"],
["OR", "Oregon", "Pacific Wonderland"],
["PA", "Pennsylvania", "Keystone State"],
["RI", "Rhode Island", "Ocean State"],
["SC", "South Carolina", "Nothing Could be Finer"],
["SD", "South Dakota", "Great Faces, Great Places"],
["TN", "Tennessee", "Volunteer State"],
["TX", "Texas", "Lone Star State"],
["UT", "Utah", "Salt Lake State"],
["VT", "Vermont", "Green Mountain State"],
["VA", "Virginia", "Mother of States"],
["WA", "Washington", "Green Tree State"],
["WV", "West Virginia", "Mountain State"],
["WI", "Wisconsin", "America"s Dairyland"],
["WY", "Wyoming", "Like No Place on Earth"]
];
/*!
* 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 fs = new Ext.FormPanel({
frame: true,
title:"XML Form",
labelAlign: "right",
labelWidth: 85,
width:340,
waitMsgTarget: true,
// configure how to read the XML Data
reader : new Ext.data.XmlReader({
record : "contact",
success: "@success"
}, [
{name: "first", mapping:"name/first"}, // custom mapping
{name: "last", mapping:"name/last"},
"company", "email", "state",
{name: "dob", type:"date", dateFormat:"m/d/Y"} // custom data types
]),
// reusable eror reader class defined at the end of this file
errorReader: new Ext.form.XmlErrorReader(),
items: [
new Ext.form.FieldSet({
title: "Contact Information",
autoHeight: true,
defaultType: "textfield",
items: [{
fieldLabel: "First Name",
name: "first",
width:190
}, {
fieldLabel: "Last Name",
name: "last",
width:190
}, {
fieldLabel: "Company",
name: "company",
width:190
}, {
fieldLabel: "Email",
name: "email",
vtype:"email",
width:190
},
new Ext.form.ruboBox({
fieldLabel: "State",
hiddenName:"state",
store: new Ext.data.ArrayStore({
fields: ["abbr", "state"],
data : Ext.exampledata.states // from states.js
}),
valueField:"abbr",
displayField:"state",
typeAhead: true,
mode: "local",
triggerAction: "all",
emptyText:"Select a state...",
selectOnFocus:true,
width:190
}),
new Ext.form.DateField({
fieldLabel: "Date of Birth",
name: "dob",
width:190,
allowBlank:false
})
]
})
]
});
// simple button add
fs.addButton("Load", function(){
fs.getForm().load({url:"ext-3.0.0/examples/form/xml-form.xml", waitMsg:"Loading"});
});
// explicit add
var submit = fs.addButton({
text: "Submit",
disabled:true,
handler: function(){
fs.getForm().submit({url:"ext-3.0.0/examples/form/xml-errors.xml", waitMsg:"Saving Data..."});
}
});
fs.render("form-ct");
fs.on({
actioncomplete: function(form, action){
if(action.type == "load"){
submit.enable();
}
}
});
});
// A reusable error reader class for XML forms
Ext.form.XmlErrorReader = function(){
Ext.form.XmlErrorReader.superclass.constructor.call(this, {
record : "field",
success: "@success"
}, [
"id", "msg"
]
);
};
Ext.extend(Ext.form.XmlErrorReader, Ext.data.XmlReader);
</script>
<div id="form-ct"></div>
</body>
</html>
Set fieldset height to auto
<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 radioGroup = {
xtype: "fieldset",
title: "Groups",
autoHeight: true,
items: [
{
xtype: "radiogroup",
fieldLabel: "Auto Layout",
items: [
{boxLabel: "Item 1", name: "yourName", inputValue: 1},
{boxLabel: "Item 2", name: "yourName", inputValue: 2, checked: true},
{boxLabel: "Item 3", name: "yourName", inputValue: 3},
{boxLabel: "Item 4", name: "yourName", inputValue: 4},
{boxLabel: "Item 5", name: "yourName", inputValue: 5}
]
}
]
};
var fp = new Ext.FormPanel({
title: "Title",
frame: true,
labelWidth: 110,
width: 600,
renderTo:Ext.getBody(),
bodyStyle: "padding:0 10px 0;",
items: [
radioGroup
],
buttons: [{
text: "Save",
handler: function(){
if(fp.getForm().isValid()){
Ext.Msg.alert("asdf");
}
}
},{
text: "Reset",
handler: function(){
fp.getForm().reset();
}
}]
});
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Set field to typeahead to true
<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 names = [
["A"],
["B"],
["C"],
["D"]
];
var mySimpleStore = new Ext.data.ArrayStore({
data : names,
fields : ["name"]
});
var combo = {
xtype : "combo",
fieldLabel : "Letter",
store : mySimpleStore,
displayField : "name",
typeAhead : true,
mode : "local"
}
new Ext.Window({
title : "Title here",
height : 100,
layout : "form",
labelWidth : 80,
bodyStyle : "padding: 5px",
items : combo
}).show()
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Set message target to under
<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",
}
];
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>
<div id="div1">asdf</div>
</body>
</html>
Spotlight Demo: restrict input to a particular element by masking all other page content
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
<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>
<script language="javascript" src="ext-3.0.0/examples/ux/Spotlight.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var spot = new Ext.ux.Spotlight({
easing: "easeOut",
duration: .3
});
var DemoPanel = Ext.extend(Ext.Panel, {
title: "Demo Panel",
frame: true,
width: 200,
height: 150,
html: "Some panel content goes here!",
bodyStyle: "padding:10px 15px;",
toggle: function(on){
this.buttons[0].setDisabled(!on);
}
});
var p1, p2, p3;
var updateSpot = function(id){
if(typeof id == "string"){
spot.show(id);
}else if (!id && spot.active){
spot.hide();
}
p1.toggle(id==p1.id);
p2.toggle(id==p2.id);
p3.toggle(id==p3.id);
};
new Ext.Panel({
renderTo: Ext.getBody(),
layout: "table",
id: "demo-ct",
border: false,
layoutConfig: {
columns: 3
},
items: [p1 = new DemoPanel({
id: "panel1",
buttons: [{
text: "Next Panel",
handler: updateSpot.createDelegate(this, ["panel2"])
}]
}),
p2 = new DemoPanel({
id: "panel2",
buttons: [{
text: "Next Panel",
handler: updateSpot.createDelegate(this, ["panel3"])
}]
}),
p3 = new DemoPanel({
id: "panel3",
buttons: [{
text: "Done",
handler: updateSpot.createDelegate(this, [false])
}]
})]
});
new Ext.Button({
text: "Start",
renderTo: "start-ct",
handler: updateSpot.createDelegate(this, ["panel1"])
});
updateSpot(false);
});
</script>
<div id="start-ct"></div>
</body>
</html>
The Form demonstrates the use of radio buttons grouped by name being set by the value of the derived "rating" field.
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<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>
<!-- Revised from demo code in ext3.0.0 -->
<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();
// Define the Grid data and create the Grid
var myData = [
["3m Co",71.72,0.02,0.03,"9/1 12:00am"],
["Alcoa Inc",29.01,0.42,1.47,"9/1 12:00am"],
["Altria Group Inc",83.81,0.28,0.34,"9/1 12:00am"],
["American Express Company",52.55,0.01,0.02,"9/1 12:00am"],
["American International Group, Inc.",64.13,0.31,0.49,"9/1 12:00am"],
["AT&T Inc.",31.61,-0.48,-1.54,"9/1 12:00am"],
["Boeing Co.",75.43,0.53,0.71,"9/1 12:00am"],
["Caterpillar Inc.",67.27,0.92,1.39,"9/1 12:00am"],
["Citigroup, Inc.",49.37,0.02,0.04,"9/1 12:00am"],
["E.I. du Pont de Nemours and Company",40.48,0.51,1.28,"9/1 12:00am"],
["Exxon Mobil Corp",68.1,-0.43,-0.64,"9/1 12:00am"],
["General Electric Company",34.14,-0.08,-0.23,"9/1 12:00am"],
["General Motors Corporation",30.27,1.09,3.74,"9/1 12:00am"],
["Hewlett-Packard Co.",36.53,-0.03,-0.08,"9/1 12:00am"],
["Honeywell Intl Inc",38.77,0.05,0.13,"9/1 12:00am"],
["Intel Corporation",19.88,0.31,1.58,"9/1 12:00am"],
["International Business Machines",81.41,0.44,0.54,"9/1 12:00am"],
["Johnson & Johnson",64.72,0.06,0.09,"9/1 12:00am"],
["JP Morgan & Chase & Co",45.73,0.07,0.15,"9/1 12:00am"],
["McDonald\"s Corporation",36.76,0.86,2.40,"9/1 12:00am"],
["Merck & Co., Inc.",40.96,0.41,1.01,"9/1 12:00am"],
["Microsoft Corporation",25.84,0.14,0.54,"9/1 12:00am"],
["Pfizer Inc",27.96,0.4,1.45,"9/1 12:00am"],
["The Coca-Cola Company",45.07,0.26,0.58,"9/1 12:00am"],
["The Home Depot, Inc.",34.64,0.35,1.02,"9/1 12:00am"],
["The Procter & Gamble Company",61.91,0.01,0.02,"9/1 12:00am"],
["United Technologies Corporation",63.26,0.55,0.88,"9/1 12:00am"],
["Verizon Communications",35.57,0.39,1.11,"9/1 12:00am"],
["Wal-Mart Stores, Inc.",45.45,0.73,1.63,"9/1 12:00am"]
];
var ds = new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: "company"},
{name: "price", type: "float"},
{name: "change", type: "float"},
{name: "pctChange", type: "float"},
{name: "lastChange", type: "date", dateFormat: "n/j h:ia"},
// Rating dependent upon performance 0 = best, 2 = worst
{name: "rating", type: "int", convert: function(v, rec) {
if (rec[3] < 0) return 2;
if (rec[3] < 1) return 1;
return 0;
}
}
])
});
ds.loadData(myData);
// example of custom renderer function
function italic(value){
return "<i>" + value + "</i>";
}
// example of custom renderer function
function change(val){
if(val > 0){
return "<span style="color:green;">" + val + "</span>";
}else if(val < 0){
return "<span style="color:red;">" + val + "</span>";
}
return val;
}
// example of custom renderer function
function pctChange(val){
if(val > 0){
return "<span style="color:green;">" + val + "%</span>";
}else if(val < 0){
return "<span style="color:red;">" + val + "%</span>";
}
return val;
}
// render rating as "A", "B" or "C" depending upon numeric value.
function rating(v) {
if (v == 0) return "A"
if (v == 1) return "B"
if (v == 2) return "C"
}
// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var colModel = new Ext.grid.ColumnModel([
{id:"company",header: "Company", width: 160, sortable: true, locked:false, dataIndex: "company"},
{header: "Price", width: 55, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: "price"},
{header: "Change", width: 55, sortable: true, renderer: change, dataIndex: "change"},
{header: "% Change", width: 65, sortable: true, renderer: pctChange, dataIndex: "pctChange"},
{header: "Last Updated", width: 80, sortable: true, renderer: Ext.util.Format.dateRenderer("m/d/Y"), dataIndex: "lastChange"},
{header: "Rating", width: 40, sortable: true, renderer: rating, dataIndex: "rating"}
]);
bd.createChild({tag: "h2", html: "Using a Grid with a Form"});
/*
* Here is where we create the Form
*/
var gridForm = new Ext.FormPanel({
id: "company-form",
frame: true,
labelAlign: "left",
title: "Company data",
bodyStyle:"padding:5px",
width: 750,
layout: "column", // Specifies that the items will now be arranged in columns
items: [{
columnWidth: 0.60,
layout: "fit",
items: {
xtype: "grid",
ds: ds,
cm: colModel,
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, row, rec) {
Ext.getCmp("company-form").getForm().loadRecord(rec);
}
}
}),
autoExpandColumn: "company",
height: 350,
title:"Company Data",
border: true,
listeners: {
render: function(g) {
g.getSelectionModel().selectRow(0);
},
delay: 10 // Allow rows to be rendered.
}
}
},{
columnWidth: 0.4,
xtype: "fieldset",
labelWidth: 90,
title:"Company details",
defaults: {width: 140, border:false}, // Default config options for child items
defaultType: "textfield",
autoHeight: true,
bodyStyle: Ext.isIE ? "padding:0 0 5px 15px;" : "padding:10px 15px;",
border: false,
style: {
"margin-left": "10px", // when you add custom margin in IE 6...
"margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "0" // you have to adjust for it somewhere else
},
items: [{
fieldLabel: "Name",
name: "company"
},{
fieldLabel: "Price",
name: "price"
},{
fieldLabel: "% Change",
name: "pctChange"
},{
xtype: "datefield",
fieldLabel: "Last Updated",
name: "lastChange"
}, {
xtype: "panel",
layout: "table",
layoutConfig: {
columns: 4
},
anchor: "100%",
defaults: {
border: false,
layout: "form",
labelWidth: 15,
style: {
paddingRight: "10px"
}
},
// A radio group: A setValue on any of the following "radio" inputs using the numeric
// "rating" field checks the radio instance which has the matching inputValue.
items: [{
cellCls: "x-form-item",
xtype: "label",
text: "Rating",
width: 98
}, {
items: {
xtype: "radio",
name: "rating",
inputValue: "0",
fieldLabel: "A"
}
}, {
items: {
xtype: "radio",
name: "rating",
inputValue: "1",
fieldLabel: "B"
}
}, {
items: {
xtype: "radio",
name: "rating",
inputValue: "2",
fieldLabel: "C"
}
}]
}]
}],
renderTo: bd
});
// Create Panel view code. Ignore.
createCodePanel("form-grid.js", "View code to create this Form");
});
</script>
</div>
</body>
</html>