JavaScript DHTML/Ext JS/Form Layout
Содержание
- 1 Add column header to column
- 2 Align two forms
- 3 Layout field controls in a single column
- 4 Layout fieldset Container as hbox
- 5 Layout fieldset Container as vbox
- 6 Layout form, form set and tab panel in a window
- 7 Layout two fiels in one row
- 8 Multi-Column form control layout
- 9 Set columnWidth
- 10 Set control x/y position
- 11 Set form column to 3
- 12 Set form layout column width
- 13 Set layout vertical to true
- 14 Use autoHeight and autoWidth to dynamically size to fit it"s data and columns.
- 15 Use form layout to layout the controls on a window
- 16 Wrap two forms into a field set container
Add column header to column
<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",
itemCls: "x-check-group-alt",
fieldLabel: "Name",
allowBlank: false,
anchor: "95%",
items: [{
columnWidth: ".25",
items: [
{xtype: "label", text: "Heading 1", cls:"x-form-check-group-label", anchor:"-15"},
{boxLabel: "Item 1", name: "yourName", inputValue: 1},
{boxLabel: "Item 2", name: "yourName", inputValue: 2}
]
}]
}
]
};
var fp = new Ext.FormPanel({
title: "Title",
frame: true,
labelWidth: 110,
width: 600,
renderTo:Ext.getBody(),
bodyStyle: "padding:0 10px 0;",
items: [
radioGroup
]
});
}); </script>
</body> </html>
</source>
Align two forms
<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 fieldset1 = {
xtype : "fieldset",
title : "Name",
flex : 1,
border : false,
labelWidth : 50,
defaultType : "field",
defaults : {
anchor : "-10",
allowBlank : false
},
items : [
{
fieldLabel : "First",
name : "firstName"
},
{
fieldLabel : "Middle",
name : "middle"
}
]
}
var fieldset2 = Ext.apply({}, {
flex : 1,
labelWidth : 50,
title : "Address",
items : [
{
fieldLabel : "Address",
name : "address"
},
{
fieldLabel : "City",
name : "city"
}
]
}, fieldset1);
var fieldsetContainer = {
xtype : "container",
layout : "hbox",
height : 120,
layoutConfig : {
align : "stretch",
},
items : [
fieldset1,
fieldset2
]
}
var fp = new Ext.form.FormPanel({
renderTo : Ext.getBody(),
width : 700,
title : "Title",
height : 500,
frame : true,
style : "margin: 20",
layout : "vbox",
layoutConfig : {
align : "stretch"
},
defaults : {
msgTarget : "side",
anchor : "-20"
},
items : [
fieldsetContainer
]
});
}); </script>
</body> </html>
</source>
Layout field controls in a single column
<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: "Single Column",
itemCls: "x-check-group-alt",
columns: 1,
items: [
{boxLabel: "Item 1", name: "yourName", inputValue: 1},
{boxLabel: "Item 2", name: "yourName", inputValue: 2, checked: true},
{boxLabel: "Item 3", name: "yourName", inputValue: 3}
]
}
]
};
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>
Layout fieldset Container as hbox
<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 fieldset1 = {
xtype : "fieldset",
title : "Name",
flex : 1,
border : false,
labelWidth : 50,
defaultType : "field",
defaults : {
anchor : "-10",
allowBlank : false
},
items : [
{
fieldLabel : "First",
name : "firstName"
},
{
fieldLabel : "Middle",
name : "middle"
}
]
}
var fieldset2 = Ext.apply({}, {
flex : 1,
labelWidth : 50,
title : "Address",
items : [
{
fieldLabel : "Address",
name : "address"
},
{
fieldLabel : "City",
name : "city"
}
]
}, fieldset1);
var fieldsetContainer = {
xtype : "container",
layout : "hbox",
height : 120,
layoutConfig : {
align : "stretch",
},
items : [
fieldset1,
fieldset2
]
}
var fp = new Ext.form.FormPanel({
renderTo : Ext.getBody(),
width : 700,
title : "Title",
height : 500,
frame : true,
style : "margin: 20",
layout : "vbox",
layoutConfig : {
align : "stretch"
},
defaults : {
msgTarget : "side",
anchor : "-20"
},
items : [
fieldsetContainer
]
});
}); </script>
</body> </html>
</source>
Layout fieldset Container as vbox
<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 fieldset1 = {
xtype : "fieldset",
title : "Name",
flex : 1,
border : false,
labelWidth : 50,
defaultType : "field",
defaults : {
anchor : "-10",
allowBlank : false
},
items : [
{
fieldLabel : "First",
name : "firstName"
},
{
fieldLabel : "Middle",
name : "middle"
}
]
}
var fieldset2 = Ext.apply({}, {
flex : 1,
labelWidth : 50,
title : "Address",
items : [
{
fieldLabel : "Address",
name : "address"
},
{
fieldLabel : "City",
name : "city"
}
]
}, fieldset1);
var fieldsetContainer = {
xtype : "container",
layout : "vbox",
height : 120,
layoutConfig : {
align : "stretch",
},
items : [
fieldset1,
fieldset2
]
}
var fp = new Ext.form.FormPanel({
renderTo : Ext.getBody(),
width : 700,
title : "Title",
height : 500,
frame : true,
style : "margin: 20",
layout : "vbox",
layoutConfig : {
align : "stretch"
},
defaults : {
msgTarget : "side",
anchor : "-20"
},
items : [
fieldsetContainer
]
});
}); </script>
</body> </html>
</source>
Layout form, form set and tab panel in a 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() { Ext.QuickTips.init(); var fieldset1 = {
xtype : "fieldset",
title : "Name",
width : 300,
border : true,
labelWidth : 50,
defaultType : "textfield",
defaults : {
anchor : "-10",
allowBlank : false
},
items : [
{
fieldLabel : "First",
name : "firstName",
allowBlank : false
}
]
} var fieldset2 = Ext.apply({}, {
flex : 1,
labelWidth : 50,
title : "Address",
items : [
{
fieldLabel : "Address",
name : "address"
}
]
}, fieldset1); var fieldsetContainer = {
xtype : "container",
autoEl : {},
layout : "hbox",
anchor : "100%",
height : 120,
layoutConfig : {
align : "stretch",
},
items : [
fieldset1,
fieldset2
]
}
var tabs = [
{
title :"Phone Numbers",
layout : "form",
bodyStyle:"padding:5px 5px 0",
defaults : {
xtype : "textfield",
width : 230
},
items : [
{
fieldLabel : "Home",
name : "home"
}
]
},
{
title : "Resume",
xtype : "container",
autoEl : {},
layout : "fit",
items : {
xtype : "htmleditor",
name : "resume"
}
}
] var tabPanel = {
xtype :"tabpanel", activeTab : 0, deferredRender : false, layoutOnTabChange : true, border : false, cls : "x-panel-body", flex : 1, plain : true, items : tabs
}
var fp = new Ext.form.FormPanel({
renderTo : Ext.getBody(),
width : 600,
title : "Title",
height : 350,
frame : true,
layout : "vbox",
layoutConfig : {
align : "stretch"
},
items : [
fieldsetContainer,
tabPanel
]
});
}); </script>
</body> </html>
</source>
Layout two fiels in one row
<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",
border : false,
anchor : "100%",
defaultType : "field",
items : [
{
fieldLabel : "First",
name : "firstName"
},
{
fieldLabel : "Middle",
name : "middle"
},
{
fieldLabel : "Last",
name : "lastName"
},
{
fieldLabel : "Address",
name : "address"
},
{
fieldLabel : "City",
name : "city"
},
{
xtype : "container",
border : false,
layout : "column",
anchor : "100%",
defaultType : "field",
items : [
{
xtype : "container",
layout : "form",
width : 170,
items : [
{
xtype : "textfield",
fieldLabel : "State",
name : "state",
anchor : "-20"
}
]
},
{
xtype : "container",
layout : "form",
columnWidth : 1,
labelWidth : 20,
items : [
{
xtype : "textfield",
fieldLabel : "Zip",
anchor : "-10",
name : "zip"
}
]
}
]
}
]
}
new Ext.Window({
width : 600,
height : 600,
title : "Accordion window",
layout : "accordion",
border : false,
layoutConfig : {
animate : true
},
items : [panel1]
}).show();
}); </script>
</body> </html>
</source>
Multi-Column form control layout
<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: "Multi-Column
(second line)",
columns: 3,
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 columnWidth
<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",
itemCls: "x-check-group-alt",
fieldLabel: "Name",
allowBlank: false,
anchor: "95%",
items: [{
columnWidth: ".25",
items: [
{xtype: "label", text: "Heading 1", cls:"x-form-check-group-label", anchor:"-15"},
{boxLabel: "Item 1", name: "yourName", inputValue: 1},
{boxLabel: "Item 2", name: "yourName", inputValue: 2}
]
}]
}
]
};
var fp = new Ext.FormPanel({
title: "Title",
frame: true,
labelWidth: 110,
width: 600,
renderTo:Ext.getBody(),
bodyStyle: "padding:0 10px 0;",
items: [
radioGroup
]
});
}); </script>
</body> </html>
</source>
Set control x/y position
<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() {
var form = new Ext.form.FormPanel({
baseCls: "x-plain",
layout:"absolute",
url:"save-form.php",
defaultType: "textfield",
items: [{
x: 0,
y: 5,
xtype:"label",
text: "Send To:"
},{
x: 60,
y: 0,
name: "to",
anchor:"100%" // anchor width by percentage
},{
x: 0,
y: 35,
xtype:"label",
text: "Subject:"
},{
x: 60,
y: 30,
name: "subject",
anchor: "100%" // anchor width by percentage
},{
x:0,
y: 60,
xtype: "textarea",
name: "msg",
anchor: "100% 100%" // anchor width and height
}]
});
var window = new Ext.Window({
title: "Resize Me",
width: 500,
height:300,
minWidth: 300,
minHeight: 200,
layout: "fit",
plain:true,
bodyStyle:"padding:5px;",
buttonAlign:"center",
items: form,
buttons: [{
text: "Send"
},{
text: "Cancel"
}]
});
window.show();
}); </script> </body> </html>
</source>
Set form column to 3
<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: "Multi-Column
(second line)",
columns: 3,
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 form layout column 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 radioGroup = {
xtype: "fieldset",
title: "Groups",
autoHeight: true,
items: [
{
xtype: "radiogroup",
fieldLabel: "Name",
columns: [100, 100],
vertical: true,
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
]
});
}); </script>
</body> </html>
</source>
Set layout vertical 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() {
var radioGroup = {
xtype: "fieldset",
title: "Groups",
autoHeight: true,
items: [
{
xtype: "radiogroup",
fieldLabel: "Name",
itemCls: "x-check-group-alt",
columns: 3,
vertical: true,
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
]
});
}); </script>
</body> </html>
</source>
Use autoHeight and autoWidth to dynamically size to fit it"s data and columns.
<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(){
// create the Data Store
var store = new Ext.data.Store({
// load using HTTP
url: "ext-3.0.0/examples/grid/sheldon.xml",
// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have an "Item" tag
record: "Item",
id: "ASIN",
totalRecords: "@total"
}, [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: "Author", mapping: "ItemAttributes > Author"},
"Title", "Manufacturer", "ProductGroup"
])
});
// create the grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "Author", width: 120, dataIndex: "Author", sortable: true},
{header: "Title", width: 180, dataIndex: "Title", sortable: true},
{header: "Manufacturer", width: 115, dataIndex: "Manufacturer", sortable: true},
{header: "Product Group", width: 100, dataIndex: "ProductGroup", sortable: true}
],
renderTo:"example-grid",
width:540,
height:200
});
store.load();
});
</script>
</body></html>
</source>
Use form layout to layout the controls on a 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> <script type="text/javascript">
Ext.onReady(function(){
var w = new Ext.Window({
layout: "form",
items:[
{ xtype: "textfield", fieldLabel: "First Name"},
new Ext.form.TextField({fieldLabel: "Surname"})
]
});
w.show();
}); </script> <body>
</body> </html>
</source>
Wrap two forms into a field set container
<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 fieldset1 = {
xtype : "fieldset",
title : "Name",
flex : 1,
border : false,
labelWidth : 50,
defaultType : "field",
defaults : {
anchor : "-10",
allowBlank : false
},
items : [
{
fieldLabel : "First",
name : "firstName"
},
{
fieldLabel : "Middle",
name : "middle"
}
]
}
var fieldset2 = Ext.apply({}, {
flex : 1,
labelWidth : 50,
title : "Address",
items : [
{
fieldLabel : "Address",
name : "address"
},
{
fieldLabel : "City",
name : "city"
}
]
}, fieldset1);
var fieldsetContainer = {
xtype : "container",
layout : "hbox",
height : 120,
layoutConfig : {
align : "stretch",
},
items : [
fieldset1,
fieldset2
]
}
var fp = new Ext.form.FormPanel({
renderTo : Ext.getBody(),
width : 700,
title : "Title",
height : 500,
frame : true,
style : "margin: 20",
layout : "vbox",
layoutConfig : {
align : "stretch"
},
defaults : {
msgTarget : "side",
anchor : "-20"
},
items : [
fieldsetContainer
]
});
}); </script>
</body> </html>
</source>
