JavaScript DHTML/Ext JS/ComboBox
Содержание
- 1 Add combobox to a window and set width
- 2 ComboBox selection event
- 3 Combo with Templates and Ajax
- 4 Ext.form.ComboBox selectOnFocus:true
- 5 Indicate display field for a ComboBox and SimpleStore
- 6 Load data from server and feed into ComboBox
- 7 Set up combobox field
- 8 typeAhead for Ext.form.ComboBox
- 9 Validate checkboxes/radios as a group
Add combobox to a window and set width
<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
},
{
xtype : "combo",
fieldLabel : "Location",
width : 120,
store : [ "A", "B", "C" ]
},
]
});
myWin.show();
});
</script>
<div id="div1">asdf</div>
</body>
</html>
ComboBox selection event
<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 values = new Ext.data.SimpleStore({
fields: ["id", "value"],
data : [["1","A"],["2","B"],["3","C"]]
});
new Ext.FormPanel({
url: "your.php",
renderTo: Ext.getBody(),
frame: true,
title: "Title",
width: 250,
items: [
{
xtype: "combo",
name: "value",
fieldLabel: "Value",
mode: "local",
store: values,
displayField:"value",
width: 130,
listeners: {
select: function(f,r,i){
Ext.Msg.alert("Title",i);
}
}
}
]
});
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Combo with Templates and Ajax
<!--
/*!
* 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>
<!-- The box wrap markup embedded instead of using Element.boxWrap() -->
<div style="width:600px;">
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
<h3 style="margin-bottom:5px;">Search the Ext Forums</h3>
<input type="text" size="40" name="search" id="search" />
<div style="padding-top:4px;">
Live search requires a minimum of 4 characters.
</div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>
</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: "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"}
])
});
// Custom rendering Template
var resultTpl = new Ext.XTemplate(
"<tpl for="."><div class="search-item">",
"<h3><span>{lastPost:date("M j, Y")}<br />by {author}</span>{title}</h3>",
"{excerpt}",
"</div></tpl>"
);
var search = new Ext.form.ruboBox({
store: ds,
displayField:"title",
typeAhead: false,
loadingText: "Searching...",
width: 570,
pageSize:10,
hideTrigger:true,
tpl: resultTpl,
applyTo: "search",
itemSelector: "div.search-item",
onSelect: function(record){ // override default onSelect to do redirect
window.location =
String.format("http://extjs.ru/forum/showthread.php?t={0}&p={1}", record.data.topicId, record.id);
}
});
});
</script>
</div>
</body>
</html>
Ext.form.ComboBox selectOnFocus:true
<!--
/*!
* 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>
Indicate display field for a ComboBox and SimpleStore
<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 values = new Ext.data.SimpleStore({
fields: ["id", "value"],
data : [["1","A"],["2","B"],["3","C"]]
});
new Ext.FormPanel({
url: "your.php",
renderTo: Ext.getBody(),
frame: true,
title: "Title",
width: 250,
items: [
{
xtype: "combo",
name: "value",
fieldLabel: "Value",
mode: "local",
store: values,
displayField:"value",
width: 130
}
]
});
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Load data from server and feed into ComboBox
<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 values = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ["id", "name"],
root: "rows"
}),
proxy: new Ext.data.HttpProxy({
url: "data.php"
}),
autoLoad: true
});
new Ext.FormPanel({
url: "your.php",
renderTo: Ext.getBody(),
frame: true,
title: "Title",
width: 550,
items: [
{
xtype: "combo",
name: "value",
fieldLabel: "Value",
mode: "local",
store: values,
displayField:"name",
valueField: "id",
width: 130
}
]
});
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Set up combobox field
<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>
typeAhead for Ext.form.ComboBox
<!--
/*!
* 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>
Validate checkboxes/radios as a group
<!--
/*!
* 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>