Collapsed fieldset
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/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.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
/*
* Individual checkbox/radio examples
**/
// Using checkbox/radio groups will generally be easier and more flexible than
// using individual checkbox and radio controls, but this shows that you can
// certainly do so if you only need a single control, or if you want to control
// exactly where each check/radio goes within your layout.
var individual = [{
bodyStyle: 'padding-right:5px;',
items: {
xtype: 'fieldset',
title: 'Individual Checkboxes',
autoHeight: true,
defaultType: 'checkbox', // each item will be a checkbox
items: [{
xtype: 'textfield',
name: 'txt-test1',
fieldLabel: 'Alignment Test'
}, {
fieldLabel: 'Favorite Animals',
boxLabel: 'Dog',
name: 'fav-animal-dog'
}, {
fieldLabel: '',
labelSeparator: '',
boxLabel: 'Cat',
name: 'fav-animal-cat'
}, {
checked: true,
fieldLabel: '',
labelSeparator: '',
boxLabel: 'Monkey',
name: 'fav-animal-monkey'
}]
}
}, {
bodyStyle: 'padding-left:5px;',
items: {
xtype: 'fieldset',
title: 'Individual Radios',
autoHeight: true,
defaultType: 'radio', // each item will be a radio button
items: [{
xtype: 'textfield',
name: 'txt-test2',
fieldLabel: 'Alignment Test'
}, {
checked: true,
fieldLabel: 'Favorite Color',
boxLabel: 'Red',
name: 'fav-color',
inputValue: 'red'
}, {
fieldLabel: '',
labelSeparator: '',
boxLabel: 'Blue',
name: 'fav-color',
inputValue: 'blue'
}, {
fieldLabel: '',
labelSeparator: '',
boxLabel: 'Green',
name: 'fav-color',
inputValue: 'green'
}]
}
}];
/*
* CheckGroup example
**/
var checkGroup = {
xtype: 'fieldset',
title: 'Checkbox Groups (initially collapsed)',
autoHeight: true,
layout: 'form',
collapsed: true, // initially collapse the group
collapsible: true,
items: [{
xtype: 'textfield',
name: 'txt-test3',
fieldLabel: 'Alignment Test',
anchor: '95%'
}]
};
// combine all that into one huge form
var fp = new Ext.FormPanel({
title: 'Check/Radio Groups Example',
frame: true,
labelWidth: 110,
width: 600,
renderTo:'form-ct',
bodyStyle: 'padding:0 10px 0;',
items: [
{
layout: 'column',
border: false,
// defaults are applied to all child items unless otherwise specified by child item
defaults: {
columnWidth: '.5',
border: false
},
items: individual
},
checkGroup
],
buttons: [{
text: 'Save',
handler: function(){
if(fp.getForm().isValid()){
Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
fp.getForm().getValues(true).replace(/&/g,', '));
}
}
},{
text: 'Reset',
handler: function(){
fp.getForm().reset();
}
}]
});
});
</script>
<div id="form-ct"></div>
</body>
</html>
Related examples in the same category