Collapsible 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
