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
<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 }, { xtype : "combo", fieldLabel : "Location", width : 120, store : [ "A", "B", "C" ] }, ] }); myWin.show();
}); </script>
</body> </html>
</source>
ComboBox selection event
<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 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>
</body> </html>
</source>
Combo with Templates and Ajax
<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>
Search the Ext Forums
<input type="text" size="40" name="search" id="search" />
Live search requires a minimum of 4 characters.
</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(){
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=".">
{lastPost:date("M j, Y")}
by {author}{title}
",
"{excerpt}","
); 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>
</source>
Ext.form.ComboBox selectOnFocus:true
<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 */
// 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>
</body> </html>
</source>
Indicate display field for a ComboBox and SimpleStore
<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 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>
</body> </html>
</source>
Load data from server and feed into ComboBox
<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 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>
</body> </html>
</source>
Set up combobox 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 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>
</body> </html>
</source>
typeAhead for Ext.form.ComboBox
<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 */
// 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>
</body> </html>
</source>
Validate checkboxes/radios as a group
<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";
/* * 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:
"+ fp.getForm().getValues(true).replace(/&/g,", ")); } } },{ text: "Reset", handler: function(){ fp.getForm().reset(); } }] });
}); </script>
</body> </html>
</source>