123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351 |
- Ext.require([
- 'Ext.form.*',
- 'Ext.layout.container.Column',
- 'Ext.window.MessageBox',
- 'Ext.fx.target.Element'
- ]);
- Ext.onReady(function(){
- /*====================================================================
- * Individual checkbox/radio examples
- *====================================================================*/
- // Using checkbox/radio groups will generally be more convenient and flexible than
- // using individual checkbox and radio controls, but this shows that you can
- // certainly do so if you only have a single control at a time.
- var individual = {
- xtype: 'container',
- layout: 'hbox',
- margin: '0 0 10',
- items: [{
- xtype: 'fieldset',
- flex: 1,
- title: 'Individual Checkboxes',
- defaultType: 'checkbox', // each item will be a checkbox
- layout: 'anchor',
- defaults: {
- anchor: '100%',
- hideEmptyLabel: false
- },
- items: [{
- xtype: 'textfield',
- name: 'txt-test1',
- fieldLabel: 'Alignment Test'
- }, {
- fieldLabel: 'Favorite Animals',
- boxLabel: 'Dog',
- name: 'fav-animal-dog',
- inputValue: 'dog'
- }, {
- boxLabel: 'Cat',
- name: 'fav-animal-cat',
- inputValue: 'cat'
- }, {
- checked: true,
- boxLabel: 'Monkey',
- name: 'fav-animal-monkey',
- inputValue: 'monkey'
- }]
- }, {
- xtype: 'component',
- width: 10
- }, {
- xtype: 'fieldset',
- flex: 1,
- title: 'Individual Radios',
- defaultType: 'radio', // each item will be a radio button
- layout: 'anchor',
- defaults: {
- anchor: '100%',
- hideEmptyLabel: false
- },
- items: [{
- xtype: 'textfield',
- name: 'txt-test2',
- fieldLabel: 'Alignment Test'
- }, {
- checked: true,
- fieldLabel: 'Favorite Color',
- boxLabel: 'Red',
- name: 'fav-color',
- inputValue: 'red'
- }, {
- boxLabel: 'Blue',
- name: 'fav-color',
- inputValue: 'blue'
- }, {
- boxLabel: 'Green',
- name: 'fav-color',
- inputValue: 'green'
- }]
- }]
- };
- /*====================================================================
- * CheckGroup example
- *====================================================================*/
- var checkGroup = {
- xtype: 'fieldset',
- title: 'Checkbox Groups (initially collapsed)',
- layout: 'anchor',
- defaults: {
- anchor: '100%',
- labelStyle: 'padding-left:4px;'
- },
- collapsible: true,
- collapsed: true,
- items: [{
- xtype: 'textfield',
- name: 'txt-test3',
- fieldLabel: 'Alignment Test'
- },{
- // Use the default, automatic layout to distribute the controls evenly
- // across a single row
- xtype: 'checkboxgroup',
- fieldLabel: 'Auto Layout',
- cls: 'x-check-group-alt',
- 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',
- // 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)',
- cls: 'x-check-group-alt',
- // 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)',
- // 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)',
- cls: 'x-check-group-alt',
- // 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',
- fieldLabel: 'Custom Layout<br />(w/ validation)',
- allowBlank: false,
- msgTarget: 'side',
- autoFitErrors: false,
- anchor: '-18',
- // You can change the 'layout' to anything you want, and include any nested
- // container structure, for complete layout control. In this example we only
- // want one item in the middle column, which would not be possible using the
- // default 'checkboxgroup' layout's columns config. We also want to put
- // headings at the top of each column.
- layout: 'column',
- defaultType: 'container',
- items: [{
- columnWidth: .25,
- items: [
- {xtype: 'component', html: 'Heading 1', cls:'x-form-check-group-label'},
- {xtype: 'checkboxfield', boxLabel: 'Item 1', name: 'cb-cust-1'},
- {xtype: 'checkboxfield', boxLabel: 'Item 2', name: 'cb-cust-2'}
- ]
- },{
- columnWidth: .5,
- items: [
- {xtype: 'component', html: 'Heading 2', cls:'x-form-check-group-label'},
- {xtype: 'checkboxfield', boxLabel: 'A long item just for fun', name: 'cb-cust-3'}
- ]
- },{
- columnWidth: .25,
- items: [
- {xtype: 'component', html: 'Heading 3', cls:'x-form-check-group-label'},
- {xtype: 'checkboxfield', boxLabel: 'Item 4', name: 'cb-cust-4'},
- {xtype: 'checkboxfield', 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',
- // in this section we use the form layout that will aggregate all of the fields
- // into a single table, rather than one table per field.
- layout: 'form',
- defaults: {
- labelStyle: 'padding-left:4px;'
- },
- collapsible: true,
- items: [{
- xtype: 'textfield',
- name: 'txt-test4',
- fieldLabel: 'Alignment Test'
- },{
- xtype: 'radiogroup',
- fieldLabel: 'Auto Layout',
- cls: 'x-check-group-alt',
- 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',
- 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 (horizontal)',
- cls: 'x-check-group-alt',
- columns: 3,
- items: [
- {boxLabel: 'Item 1', name: 'rb-horiz-1', inputValue: 1},
- {boxLabel: 'Item 2', name: 'rb-horiz-1', inputValue: 2, checked: true},
- {boxLabel: 'Item 3', name: 'rb-horiz-1', inputValue: 3},
- {boxLabel: 'Item 1', name: 'rb-horiz-2', inputValue: 1, checked: true},
- {boxLabel: 'Item 2', name: 'rb-horiz-2', inputValue: 2}
- ]
- },{
- xtype: 'radiogroup',
- fieldLabel: 'Multi-Column (vertical)',
- 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)',
- cls: 'x-check-group-alt',
- 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',
- fieldLabel: 'Custom Layout<br />(w/ validation)',
- allowBlank: false,
- msgTarget: 'side',
- autoFitErrors: false,
- anchor: '-18',
- layout: 'column',
- defaultType: 'container',
- items: [{
- columnWidth: .25,
- items: [
- {xtype: 'component', html: 'Heading 1', cls:'x-form-check-group-label'},
- {xtype: 'radiofield', boxLabel: 'Item 1', name: 'rb-cust', inputValue: 1},
- {xtype: 'radiofield', boxLabel: 'Item 2', name: 'rb-cust', inputValue: 2}
- ]
- },{
- columnWidth: .5,
- items: [
- {xtype: 'component', html: 'Heading 2', cls:'x-form-check-group-label'},
- {xtype: 'radiofield', boxLabel: 'A long item just for fun', name: 'rb-cust', inputValue: 3}
- ]
- },{
- columnWidth: .25,
- items: [
- {xtype: 'component', html: 'Heading 3', cls:'x-form-check-group-label'},
- {xtype: 'radiofield', boxLabel: 'Item 4', name: 'rb-cust', inputValue: 4},
- {xtype: 'radiofield', boxLabel: 'Item 5', name: 'rb-cust', inputValue: 5}
- ]
- }]
- }]
- };
- // combine all that into one huge form
- var fp = Ext.create('Ext.FormPanel', {
- title: 'Check/Radio Groups Example',
- frame: true,
- fieldDefaults: {
- labelWidth: 110
- },
- width: 600,
- renderTo:'form-ct',
- bodyPadding: 10,
- 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();
- }
- }]
- });
- });
|