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
<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>
<div id="div1">asdf</div>
</body>
</html>
Align two forms
<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>
<div id="div1">asdf</div>
</body>
</html>
Layout field controls in a single column
<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>
<div id="div1">asdf</div>
</body>
</html>
Layout fieldset Container as hbox
<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>
<div id="div1">asdf</div>
</body>
</html>
Layout fieldset Container as vbox
<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>
<div id="div1">asdf</div>
</body>
</html>
Layout form, form set and tab panel in a 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() {
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>
<div id="div1">asdf</div>
</body>
</html>
Layout two fiels in one row
<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>
<div id="div1">asdf</div>
</body>
</html>
Multi-Column form control layout
<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<br/>(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>
<div id="div1">asdf</div>
</body>
</html>
Set columnWidth
<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>
<div id="div1">asdf</div>
</body>
</html>
Set control x/y position
<!--
/*!
* 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() {
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>
Set form column to 3
<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<br/>(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>
<div id="div1">asdf</div>
</body>
</html>
Set form layout column width
<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>
<div id="div1">asdf</div>
</body>
</html>
Set layout vertical to true
<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>
<div id="div1">asdf</div>
</body>
</html>
Use autoHeight and autoWidth to dynamically size to fit it"s data and columns.
<!--
/*!
* 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(){
// 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>
<div id="example-grid"></div></body>
</html>
Use form layout to layout the controls on a 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>
<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>
<div id="mainContent">
</div>
</body>
</html>
Wrap two forms into a field set container
<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>
<div id="div1">asdf</div>
</body>
</html>