+++ /dev/null
-<html>\r
-<head>\r
- <title>The source code</title>\r
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body onload="prettyPrint();">\r
- <pre class="prettyprint lang-js">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%'
- },{
- // Use the default, automatic layout to distribute the controls evenly
- // across a single row
- xtype: 'checkboxgroup',
- fieldLabel: 'Auto Layout',
- items: [
- {boxLabel: 'Item 1', name: 'cb-auto-1'},
- {boxLabel: 'Item 2', name: 'cb-auto-2', checked: true},
- {boxLabel: 'Item 3', name: 'cb-auto-3'},
- {boxLabel: 'Item 4', name: 'cb-auto-4'},
- {boxLabel: 'Item 5', name: 'cb-auto-5'}
- ]
- },{
- xtype: 'checkboxgroup',
- fieldLabel: 'Single Column',
- itemCls: 'x-check-group-alt',
- // Put all controls in a single column with width 100%
- columns: 1,
- items: [
- {boxLabel: 'Item 1', name: 'cb-col-1'},
- {boxLabel: 'Item 2', name: 'cb-col-2', checked: true},
- {boxLabel: 'Item 3', name: 'cb-col-3'}
- ]
- },{
- xtype: 'checkboxgroup',
- fieldLabel: 'Multi-Column (horizontal)',
- // Distribute controls across 3 even columns, filling each row
- // from left to right before starting the next row
- columns: 3,
- items: [
- {boxLabel: 'Item 1', name: 'cb-horiz-1'},
- {boxLabel: 'Item 2', name: 'cb-horiz-2', checked: true},
- {boxLabel: 'Item 3', name: 'cb-horiz-3'},
- {boxLabel: 'Item 4', name: 'cb-horiz-4'},
- {boxLabel: 'Item 5', name: 'cb-horiz-5'}
- ]
- },{
- xtype: 'checkboxgroup',
- fieldLabel: 'Multi-Column (vertical)',
- itemCls: 'x-check-group-alt',
- // Distribute controls across 3 even columns, filling each column
- // from top to bottom before starting the next column
- columns: 3,
- vertical: true,
- items: [
- {boxLabel: 'Item 1', name: 'cb-vert-1'},
- {boxLabel: 'Item 2', name: 'cb-vert-2', checked: true},
- {boxLabel: 'Item 3', name: 'cb-vert-3'},
- {boxLabel: 'Item 4', name: 'cb-vert-4'},
- {boxLabel: 'Item 5', name: 'cb-vert-5'}
- ]
- },{
- xtype: 'checkboxgroup',
- fieldLabel: 'Multi-Column<br />(custom widths)',
- // Specify exact column widths (could also include float values for %)
- columns: [100, 100],
- vertical: true,
- items: [
- {boxLabel: 'Item 1', name: 'cb-custwidth', inputValue: 1},
- {boxLabel: 'Item 2', name: 'cb-custwidth', inputValue: 2, checked: true},
- {boxLabel: 'Item 3', name: 'cb-custwidth', inputValue: 3},
- {boxLabel: 'Item 4', name: 'cb-custwidth', inputValue: 4},
- {boxLabel: 'Item 5', name: 'cb-custwidth', inputValue: 5}
- ]
- },{
- xtype: 'checkboxgroup',
- itemCls: 'x-check-group-alt',
- fieldLabel: 'Custom Layout<br />(w/ validation)',
- allowBlank: false,
- anchor: '95%',
- items: [{
- // You can pass sub-item arrays along with width/columnWidth configs
- // ColumnLayout-style for complete layout control. In this example we
- // only want one item in the middle column, which would not be possible
- // using the columns config. We also want to make sure that our headings
- // end up at the top of each column as expected.
- columnWidth: '.25',
- items: [
- {xtype: 'label', text: 'Heading 1', cls:'x-form-check-group-label', anchor:'-15'},
- {boxLabel: 'Item 1', name: 'cb-cust-1'},
- {boxLabel: 'Item 2', name: 'cb-cust-2'}
- ]
- },{
- columnWidth: '.5',
- items: [
- {xtype: 'label', text: 'Heading 2', cls:'x-form-check-group-label', anchor:'-15'},
- {boxLabel: 'A long item just for fun', name: 'cb-cust-3'}
- ]
- },{
- columnWidth: '.25',
- items: [
- {xtype: 'label', text: 'Heading 3', cls:'x-form-check-group-label', anchor:'-15'},
- {boxLabel: 'Item 4', name: 'cb-cust-4'},
- {boxLabel: 'Item 5', name: 'cb-cust-5'}
- ]
- }]
- }]
- };
-
- /*====================================================================
- * RadioGroup examples
- *====================================================================*/
- // NOTE: These radio examples use the exact same options as the checkbox ones
- // above, so the comments will not be repeated. Please see comments above for
- // additional explanation on some config options.
-
- var radioGroup = {
-
- xtype: 'fieldset',
- title: 'Radio Groups',
- autoHeight: true,
- items: [{
- xtype: 'textfield',
- name: 'txt-test4',
- fieldLabel: 'Alignment Test',
- anchor: '95%'
- },{
- xtype: 'radiogroup',
- fieldLabel: 'Auto Layout',
- items: [
- {boxLabel: 'Item 1', name: 'rb-auto', inputValue: 1},
- {boxLabel: 'Item 2', name: 'rb-auto', inputValue: 2, checked: true},
- {boxLabel: 'Item 3', name: 'rb-auto', inputValue: 3},
- {boxLabel: 'Item 4', name: 'rb-auto', inputValue: 4},
- {boxLabel: 'Item 5', name: 'rb-auto', inputValue: 5}
- ]
- },{
- xtype: 'radiogroup',
- fieldLabel: 'Single Column',
- itemCls: 'x-check-group-alt',
- columns: 1,
- items: [
- {boxLabel: 'Item 1', name: 'rb-col', inputValue: 1},
- {boxLabel: 'Item 2', name: 'rb-col', inputValue: 2, checked: true},
- {boxLabel: 'Item 3', name: 'rb-col', inputValue: 3}
- ]
- },{
- xtype: 'radiogroup',
- fieldLabel: 'Multi-Column<br />(horiz. auto-width)',
- columns: 3,
- items: [
- {boxLabel: 'Item 1', name: 'rb-horiz', inputValue: 1},
- {boxLabel: 'Item 2', name: 'rb-horiz', inputValue: 2, checked: true},
- {boxLabel: 'Item 3', name: 'rb-horiz', inputValue: 3},
- {boxLabel: 'Item 4', name: 'rb-horiz', inputValue: 4},
- {boxLabel: 'Item 5', name: 'rb-horiz', inputValue: 5}
- ]
- },{
- xtype: 'radiogroup',
- fieldLabel: 'Multi-Column<br />(vert. auto-width)',
- itemCls: 'x-check-group-alt',
- columns: 3,
- vertical: true,
- items: [
- {boxLabel: 'Item 1', name: 'rb-vert', inputValue: 1},
- {boxLabel: 'Item 2', name: 'rb-vert', inputValue: 2, checked: true},
- {boxLabel: 'Item 3', name: 'rb-vert', inputValue: 3},
- {boxLabel: 'Item 4', name: 'rb-vert', inputValue: 4},
- {boxLabel: 'Item 5', name: 'rb-vert', inputValue: 5}
- ]
- },{
- xtype: 'radiogroup',
- fieldLabel: 'Multi-Column<br />(custom widths)',
- columns: [100, 100],
- vertical: true,
- items: [
- {boxLabel: 'Item 1', name: 'rb-custwidth', inputValue: 1},
- {boxLabel: 'Item 2', name: 'rb-custwidth', inputValue: 2, checked: true},
- {boxLabel: 'Item 3', name: 'rb-custwidth', inputValue: 3},
- {boxLabel: 'Item 4', name: 'rb-custwidth', inputValue: 4},
- {boxLabel: 'Item 5', name: 'rb-custwidth', inputValue: 5}
- ]
- },{
- xtype: 'radiogroup',
- itemCls: 'x-check-group-alt',
- fieldLabel: 'Custom Layout<br />(w/ validation)',
- 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: 'rb-cust', inputValue: 1},
- {boxLabel: 'Item 2', name: 'rb-cust', inputValue: 2}
- ]
- },{
- columnWidth: '.5',
- items: [
- {xtype: 'label', text: 'Heading 2', cls:'x-form-check-group-label', anchor:'-15'},
- {boxLabel: 'A long item just for fun', name: 'rb-cust', inputValue: 3}
- ]
- },{
- columnWidth: '.25',
- items: [
- {xtype: 'label', text: 'Heading 3', cls:'x-form-check-group-label', anchor:'-15'},
- {boxLabel: 'Item 4', name: 'rb-cust', inputValue: 4},
- {boxLabel: 'Item 5', name: 'rb-cust', inputValue: 5}
- ]
- }]
- }]
- };
-
- // 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,
- radioGroup
- ],
- 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();
- }
- }]
- });
-});</pre> \r
-</body>\r
-</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff