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
<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>
<div id="div1">asdf</div>
</body>
</html>
Add fields to form panel
<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>
<div id="div1">asdf</div>
</body>
</html>
By virtue of inheriting from the Ext Container class, an Ext.form.FormPanel can contain any Ext Component.
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
Ext.onReady(function(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = "side";
var bd = Ext.getBody();
// Define the Grid data and create the Grid
var myData = [
["3m Co",71.72,0.02,0.03,"9/1 12:00am"],
["Alcoa Inc",29.01,0.42,1.47,"9/1 12:00am"],
["Altria Group Inc",83.81,0.28,0.34,"9/1 12:00am"],
["American Express Company",52.55,0.01,0.02,"9/1 12:00am"],
["American International Group, Inc.",64.13,0.31,0.49,"9/1 12:00am"],
["AT&T Inc.",31.61,-0.48,-1.54,"9/1 12:00am"],
["Boeing Co.",75.43,0.53,0.71,"9/1 12:00am"],
["Caterpillar Inc.",67.27,0.92,1.39,"9/1 12:00am"],
["Citigroup, Inc.",49.37,0.02,0.04,"9/1 12:00am"],
["E.I. du Pont de Nemours and Company",40.48,0.51,1.28,"9/1 12:00am"],
["Exxon Mobil Corp",68.1,-0.43,-0.64,"9/1 12:00am"],
["General Electric Company",34.14,-0.08,-0.23,"9/1 12:00am"],
["General Motors Corporation",30.27,1.09,3.74,"9/1 12:00am"],
["Hewlett-Packard Co.",36.53,-0.03,-0.08,"9/1 12:00am"],
["Honeywell Intl Inc",38.77,0.05,0.13,"9/1 12:00am"],
["Intel Corporation",19.88,0.31,1.58,"9/1 12:00am"],
["International Business Machines",81.41,0.44,0.54,"9/1 12:00am"],
["Johnson & Johnson",64.72,0.06,0.09,"9/1 12:00am"],
["JP Morgan & Chase & Co",45.73,0.07,0.15,"9/1 12:00am"],
["McDonald\"s Corporation",36.76,0.86,2.40,"9/1 12:00am"],
["Merck & Co., Inc.",40.96,0.41,1.01,"9/1 12:00am"],
["Microsoft Corporation",25.84,0.14,0.54,"9/1 12:00am"],
["Pfizer Inc",27.96,0.4,1.45,"9/1 12:00am"],
["The Coca-Cola Company",45.07,0.26,0.58,"9/1 12:00am"],
["The Home Depot, Inc.",34.64,0.35,1.02,"9/1 12:00am"],
["The Procter & Gamble Company",61.91,0.01,0.02,"9/1 12:00am"],
["United Technologies Corporation",63.26,0.55,0.88,"9/1 12:00am"],
["Verizon Communications",35.57,0.39,1.11,"9/1 12:00am"],
["Wal-Mart Stores, Inc.",45.45,0.73,1.63,"9/1 12:00am"]
];
var ds = new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: "company"},
{name: "price", type: "float"},
{name: "change", type: "float"},
{name: "pctChange", type: "float"},
{name: "lastChange", type: "date", dateFormat: "n/j h:ia"},
// Rating dependent upon performance 0 = best, 2 = worst
{name: "rating", type: "int", convert: function(v, rec) {
if (rec[3] < 0) return 2;
if (rec[3] < 1) return 1;
return 0;
}
}
])
});
ds.loadData(myData);
// example of custom renderer function
function italic(value){
return "<i>" + value + "</i>";
}
// example of custom renderer function
function change(val){
if(val > 0){
return "<span style="color:green;">" + val + "</span>";
}else if(val < 0){
return "<span style="color:red;">" + val + "</span>";
}
return val;
}
// example of custom renderer function
function pctChange(val){
if(val > 0){
return "<span style="color:green;">" + val + "%</span>";
}else if(val < 0){
return "<span style="color:red;">" + val + "%</span>";
}
return val;
}
// render rating as "A", "B" or "C" depending upon numeric value.
function rating(v) {
if (v == 0) return "A"
if (v == 1) return "B"
if (v == 2) return "C"
}
// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var colModel = new Ext.grid.ColumnModel([
{id:"company",header: "Company", width: 160, sortable: true, locked:false, dataIndex: "company"},
{header: "Price", width: 55, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: "price"},
{header: "Change", width: 55, sortable: true, renderer: change, dataIndex: "change"},
{header: "% Change", width: 65, sortable: true, renderer: pctChange, dataIndex: "pctChange"},
{header: "Last Updated", width: 80, sortable: true, renderer: Ext.util.Format.dateRenderer("m/d/Y"), dataIndex: "lastChange"},
{header: "Rating", width: 40, sortable: true, renderer: rating, dataIndex: "rating"}
]);
bd.createChild({tag: "h2", html: "Using a Grid with a Form"});
/*
* Here is where we create the Form
*/
var gridForm = new Ext.FormPanel({
id: "company-form",
frame: true,
labelAlign: "left",
title: "Company data",
bodyStyle:"padding:5px",
width: 750,
layout: "column", // Specifies that the items will now be arranged in columns
items: [{
columnWidth: 0.60,
layout: "fit",
items: {
xtype: "grid",
ds: ds,
cm: colModel,
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, row, rec) {
Ext.getCmp("company-form").getForm().loadRecord(rec);
}
}
}),
autoExpandColumn: "company",
height: 350,
title:"Company Data",
border: true,
listeners: {
render: function(g) {
g.getSelectionModel().selectRow(0);
},
delay: 10 // Allow rows to be rendered.
}
}
},{
columnWidth: 0.4,
xtype: "fieldset",
labelWidth: 90,
title:"Company details",
defaults: {width: 140, border:false}, // Default config options for child items
defaultType: "textfield",
autoHeight: true,
bodyStyle: Ext.isIE ? "padding:0 0 5px 15px;" : "padding:10px 15px;",
border: false,
style: {
"margin-left": "10px", // when you add custom margin in IE 6...
"margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "0" // you have to adjust for it somewhere else
},
items: [{
fieldLabel: "Name",
name: "company"
},{
fieldLabel: "Price",
name: "price"
},{
fieldLabel: "% Change",
name: "pctChange"
},{
xtype: "datefield",
fieldLabel: "Last Updated",
name: "lastChange"
}, {
xtype: "panel",
layout: "table",
layoutConfig: {
columns: 4
},
anchor: "100%",
defaults: {
border: false,
layout: "form",
labelWidth: 15,
style: {
paddingRight: "10px"
}
},
// A radio group: A setValue on any of the following "radio" inputs using the numeric
// "rating" field checks the radio instance which has the matching inputValue.
items: [{
cellCls: "x-form-item",
xtype: "label",
text: "Rating",
width: 98
}, {
items: {
xtype: "radio",
name: "rating",
inputValue: "0",
fieldLabel: "A"
}
}, {
items: {
xtype: "radio",
name: "rating",
inputValue: "1",
fieldLabel: "B"
}
}, {
items: {
xtype: "radio",
name: "rating",
inputValue: "2",
fieldLabel: "C"
}
}]
}]
}],
renderTo: bd
});
// Create Panel view code. Ignore.
createCodePanel("form-grid.js", "View code to create this Form");
});
</script>
</div>
</body>
</html>
Create a form panel and add to window
<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>
<div id="div1">asdf</div>
</body>
</html>
Create form panel and add to window
<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>
<div id="div1">asdf</div>
</body>
</html>
forms can contain TabPanel(s)
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
Ext.onReady(function(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = "side";
var bd = Ext.getBody();
/*
* Form 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>
Get raw value from form 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 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>
<div id="div1">asdf</div>
</body>
</html>
Render form panel to html body
<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>
<div id="div1">asdf</div>
</body>
</html>
Set defaults alert message target and anchor offset
<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>
<div id="div1">asdf</div>
</body>
</html>
Set defaults: {width: 230} for FormPanel
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
Ext.onReady(function(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = "side";
var bd = Ext.getBody();
/*
* 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>
Set label width and default control type
<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>
<div id="div1">asdf</div>
</body>
</html>
Set monitorValid = true and monitorPoll = 50
<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>
<div id="div1">asdf</div>
</body>
</html>
Set reader for form 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() {
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>
<div id="div1">asdf</div>
</body>
</html>
Set url for FormPanel
<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>
<div id="div1">asdf</div>
</body>
</html>
Set width, height and title for form panel
<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>
<div id="div1">asdf</div>
</body>
</html>
Titled border for FormPanel
<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>
<div id="div1">asdf</div>
</body>
</html>
Use addButton method to add buttons to a FormPanel
<!--
/*!
* 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>