JavaScript DHTML/Ext JS/FormPanel
Содержание
- 1 Add button for a FormPanel and set Label text
- 2 Add fields to form panel
- 3 By virtue of inheriting from the Ext Container class, an Ext.form.FormPanel can contain any Ext Component.
- 4 Create a form panel and add to window
- 5 Create form panel and add to window
- 6 forms can contain TabPanel(s)
- 7 Get raw value from form field
- 8 Render form panel to html body
- 9 Set defaults alert message target and anchor offset
- 10 Set defaults: {width: 230} for FormPanel
- 11 Set label width and default control type
- 12 Set monitorValid = true and monitorPoll = 50
- 13 Set reader for form field
- 14 Set url for FormPanel
- 15 Set width, height and title for form panel
- 16 Titled border for FormPanel
- 17 Use addButton method to add buttons to a FormPanel
Add button for a FormPanel and set Label text
<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: "textfield", name: "txt-test4", fieldLabel: "Label", anchor: "95%" }] }; 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>
Add fields to form panel
<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 formPanel = { xtype : "form", height : 125, autoScroll : true, id : "formpanel", defaultType : "field", frame : true, title : "form panel", items : [ { fieldLabel : "Name" }, { fieldLabel : "Age" } ] }; var myWin = new Ext.Window({ id : "myWin", height : 400, width : 400, items : [formPanel] }); myWin.show();
}); </script>
</body> </html>
</source>
By virtue of inheriting from the Ext Container class, an Ext.form.FormPanel can contain any Ext Component.
<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>
Create a form panel and add to window
<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 panel1 = {
xtype : "form", title : "Form Panel", defaults : { width : 150 }, items : [ { xtype : "textfield", fieldLabel : "Name" }, { xtype : "checkbox", fieldLabel : "Do you love Ext?" }, { xtype : "combo", fieldLabel : "Choose Version", store : [ "3.0", "2.0", "1.0" ] } ]
} new Ext.Window({
width : 300, height : 300, title : "Accordion window", layout : "accordion", border : false, layoutConfig : { animate : true }, items : [panel1,panel1,panel1,]
}).show(); }); </script>
</body> </html>
</source>
Create form panel and add to window
<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 formPanel = { xtype : "form", height : 125, autoScroll : true, id : "formpanel", defaultType : "field", frame : true, title : "form panel", items : [ { fieldLabel : "Name" }, { fieldLabel : "Age" } ] }; var myWin = new Ext.Window({ id : "myWin", height : 400, width : 400, items : [formPanel] }); myWin.show();
}); </script>
</body> </html>
</source>
forms can contain TabPanel(s)
<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 5 */ bd.createChild({tag: "h2", html: "Form 5 - ... and forms can contain TabPanel(s)"}); var tab2 = new Ext.FormPanel({ labelAlign: "top", title: "Inner Tabs", bodyStyle:"padding:5px", width: 600, items: [{ layout:"column", border:false, items:[{ columnWidth:.5, layout: "form", border:false, items: [{ xtype:"textfield", fieldLabel: "First Name", name: "first", anchor:"95%" }, { xtype:"textfield", fieldLabel: "Company", name: "company", anchor:"95%" }] },{ columnWidth:.5, layout: "form", border:false, items: [{ xtype:"textfield", fieldLabel: "Last Name", name: "last", anchor:"95%" },{ xtype:"textfield", fieldLabel: "Email", name: "email", vtype:"email", anchor:"95%" }] }] },{ xtype:"tabpanel", plain:true, activeTab: 0, height:235, defaults:{bodyStyle:"padding:10px"}, items:[{ title:"Personal Details", layout:"form", defaults: {width: 230}, defaultType: "textfield", items: [{ fieldLabel: "First Name", name: "first", allowBlank:false, value: "Jack" },{ fieldLabel: "Last Name", name: "last", value: "Slocum" },{ fieldLabel: "Company", name: "company", value: "Ext JS" }, { fieldLabel: "Email", name: "email", vtype:"email" }] },{ title:"Phone Numbers", layout:"form", defaults: {width: 230}, defaultType: "textfield", items: [{ fieldLabel: "Home", name: "home", value: "(888) 555-1212" },{ fieldLabel: "Business", name: "business" },{ fieldLabel: "Mobile", name: "mobile" },{ fieldLabel: "Fax", name: "fax" }] },{ cls:"x-plain", title:"Biography", layout:"fit", items: { xtype:"htmleditor", id:"bio2", fieldLabel:"Biography" } }] }], buttons: [{ text: "Save" },{ text: "Cancel" }] }); tab2.render(document.body);
}); </script> </div> </body> </html>
</source>
Get raw value from form 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 htmlEditor = { xtype : "htmleditor", fieldLabel : "", anchor : "100% 100%", allowBlank : false, validateValue : function() { var val = this.getRawValue(); return false; } } var f = { xtype : "form", labelWidth : -20, items : htmlEditor, border : false } new Ext.Window({ title : "", layout : "fit", height : 300, width : 600, items : f, buttons : [ { text : "Is the html editor valid??", handler : function() { var isValid = Ext.getCmp("ext-comp-1003").form.isValid(); var msg = (isValid) ? "valid" : "invalid"; Ext.MessageBox.alert("Title", "The HTML Editor is " + msg); } } ] }).show();
}); </script>
</body> </html>
</source>
Render form panel to html body
<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 : "side", }
]; var fp = new Ext.form.FormPanel({
renderTo : Ext.getBody(), width : 400, title : "Title here", height : 170, frame : true, bodyStyle : "padding: 5px", monitorValid : true, monitorPoll : 50, labelWidth : 125, defaultType : "textfield", defaults : { msgTarget : "side", anchor : "-20" }, items : formPanelItems,
});
}); </script>
</body> </html>
</source>
Set defaults alert message target and anchor offset
<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 : "side", }
]; var fp = new Ext.form.FormPanel({
renderTo : Ext.getBody(), width : 400, title : "Title here", height : 170, frame : true, bodyStyle : "padding: 5px", monitorValid : true, monitorPoll : 50, labelWidth : 125, defaultType : "textfield", defaults : { msgTarget : "side", anchor : "-20" }, items : formPanelItems,
});
}); </script>
</body> </html>
</source>
Set defaults: {width: 230} for FormPanel
<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(); /* * Simple form */ bd.createChild({tag: "h2", html: "Form 1 - Very Simple"});
var simple = new Ext.FormPanel({ labelWidth: 75, // label settings here cascade unless overridden url:"save-form.php", frame:true, title: "Simple Form", bodyStyle:"padding:5px 5px 0", width: 350, defaults: {width: 230}, defaultType: "textfield", items: [{ fieldLabel: "First Name", name: "first", allowBlank:false },{ fieldLabel: "Last Name", name: "last" },{ fieldLabel: "Company", name: "company" }, { fieldLabel: "Email", name: "email", vtype:"email" }, new Ext.form.TimeField({ fieldLabel: "Time", name: "time", minValue: "8:00am", maxValue: "6:00pm" }) ], buttons: [{ text: "Save" },{ text: "Cancel" }] }); simple.render(document.body);
}); </script> </div> </body> </html>
</source>
Set label width and default control type
<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 : "side", }
]; var fp = new Ext.form.FormPanel({
renderTo : Ext.getBody(), width : 400, title : "Title here", height : 170, frame : true, bodyStyle : "padding: 5px", monitorValid : true, monitorPoll : 50, labelWidth : 125, defaultType : "textfield", defaults : { msgTarget : "side", anchor : "-20" }, items : formPanelItems,
});
}); </script>
</body> </html>
</source>
Set monitorValid = true and monitorPoll = 50
<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 : "side", }
]; var fp = new Ext.form.FormPanel({
renderTo : Ext.getBody(), width : 400, title : "Title here", height : 170, frame : true, bodyStyle : "padding: 5px", monitorValid : true, monitorPoll : 50, labelWidth : 125, defaultType : "textfield", defaults : { msgTarget : "side", anchor : "-20" }, items : formPanelItems,
});
}); </script>
</body> </html>
</source>
Set reader for form field
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() { var fieldset1 = {
title : "Name Information", flex : 1, border : false, labelWidth : 50, defaultType : "field", defaults : { anchor : "-10", allowBlank : false }, items : [ { fieldLabel : "First", name : "firstName" }, { fieldLabel : "Address", name : "address" }, { fieldLabel : "Last", name : "lastName" } ]
} var onSuccessOrFail = function(form, action) {
var formPanel = Ext.getCmp("myFormPanel"); formPanel.el.unmask(); var result = action.result; if (result.success) { Ext.MessageBox.alert("Success",action.result.msg); } else { Ext.MessageBox.alert("Failure",action.result.msg); }
} var loadHandler = function() {
var formPanel = Ext.getCmp("myFormPanel"); formPanel.el.mask("Please wait", "x-mask-loading"); formPanel.getForm().load({ url : "translate.php", success : function() { var formPanel = Ext.getCmp("myFormPanel"); formPanel.el.unmask(); } });
} var buttons = [
{ text : "load", handler : loadHandler }
];
var fp = new Ext.form.FormPanel({
renderTo : Ext.getBody(), width : 600, id : "myFormPanel", title : "Our complex form", height : 350, frame : true, layout : "vbox", layoutConfig : { align : "stretch" }, items : [ fieldset1 ], buttons : buttons, reader : new Ext.data.JsonReader({ root : "records", fields : [ { name : "firstName", mapping : "name" }, { name : "lastName", mapping : "nameLast" }, { name : "address", mapping : "addy" } ] })
});
}); </script>
</body> </html>
</source>
Set url for FormPanel
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() {
new Ext.FormPanel({ url: "your.php", renderTo: Ext.getBody(), frame: true, title: "Title", width: 250, items: [ { xtype: "textfield", fieldLabel: "Title", name: "title" }, { xtype: "datefield", fieldLabel: "Released", name: "released" } ] });
}); </script>
</body> </html>
</source>
Set width, height and title for form panel
<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 : "side", }
]; 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>
Titled border for FormPanel
<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: "textfield", name: "txt-test4", fieldLabel: "Label", anchor: "95%" }] }; 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>
Use addButton method to add buttons to a FormPanel
<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>