JavaScript DHTML/Ext JS/Form Fields — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
|
Версия 12:59, 26 мая 2010
Содержание
- 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
<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> <script type="text/javascript" src="ext-3.0.0/examples/ux/SearchField.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(){
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=".">","
{lastPost:date("M j, Y")}
by {author}",
"<a href="http://extjs.ru/forum/showthread.php?t={topicId}&p={postId}" target="_blank">{title}</a>
",
"{excerpt}
", "); 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>
</body> </html>
</source>
Call reset method to reset all fields on a form
<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 } ], 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>
</body> </html>
</source>
Collapsed fieldset
<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>
Collapsible fieldset
<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>
Form field: allowBlank
<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>
Get form button by id
<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.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>
Confirm
Standard Yes/No dialog.
<button id="mb1">Show</button>
</body> </html>
</source>
Indicate field as local
<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>
Load xml data for a Form
<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>
Set fieldset height to auto
<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 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>
</body> </html>
</source>
Set field to typeahead to 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.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>
Set message target to under
<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", }
]; 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>
Spotlight Demo: restrict input to a particular element by masking all other page content
<source lang="html4strict">
/*!
* 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>
</body> </html>
</source>
The Form demonstrates the use of radio buttons grouped by name being set by the value of the derived "rating" 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 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 "" + value + ""; } // example of custom renderer function function change(val){ if(val > 0){ return "" + val + ""; }else if(val < 0){ return "" + val + ""; } return val; } // example of custom renderer function function pctChange(val){ if(val > 0){ return "" + val + "%"; }else if(val < 0){ return "" + val + "%"; } 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>
</source>