-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
-\r
-Ext.onReady(function(){\r
-\r
- Ext.QuickTips.init();\r
- \r
- // turn on validation errors beside the field globally\r
- Ext.form.Field.prototype.msgTarget = 'side';\r
-\r
- var fp = new Ext.FormPanel({\r
- frame: true,\r
- title:'Check/Radio Groups',\r
- labelWidth: 110,\r
- width: 600,\r
- renderTo:'form-ct',\r
- bodyStyle: 'padding:0 10px 0;',\r
- \r
- items: [{\r
- layout: 'column',\r
- border: false,\r
- defaults: {\r
- columnWidth: '.5',\r
- border: false\r
- },\r
- \r
- /*====================================================================\r
- * Individual checkbox/radio examples\r
- *====================================================================*/\r
- \r
- // Using checkbox/radio groups will generally be easier and more flexible than\r
- // using individual checkbox and radio controls, but this shows that you can\r
- // certainly do so if you only need a single control, or if you want to control \r
- // exactly where each check/radio goes within your layout.\r
- \r
- items: [{\r
- bodyStyle: 'padding-right:5px;',\r
- items: {\r
- xtype:'fieldset',\r
- title: 'Individual Checkboxes',\r
- autoHeight: true,\r
- defaultType: 'checkbox', // each item will be a checkbox\r
- items: [{\r
- xtype: 'textfield',\r
- name: 'txt-test1',\r
- fieldLabel: 'Alignment Test'\r
- },{\r
- fieldLabel: 'Favorite Animals',\r
- boxLabel: 'Dog',\r
- name: 'fav-animal-dog'\r
- },{\r
- fieldLabel: '',\r
- labelSeparator: '',\r
- boxLabel: 'Cat',\r
- name: 'fav-animal-cat'\r
- },{\r
- checked: true,\r
- fieldLabel: '',\r
- labelSeparator: '',\r
- boxLabel: 'Monkey',\r
- name: 'fav-animal-monkey'\r
- }]\r
- }\r
- },{\r
- bodyStyle: 'padding-left:5px;',\r
- items: {\r
- xtype:'fieldset',\r
- title: 'Individual Radios',\r
- autoHeight: true,\r
- defaultType: 'radio', // each item will be a radio button\r
- items: [{\r
- xtype: 'textfield',\r
- name: 'txt-test2',\r
- fieldLabel: 'Alignment Test'\r
- },{\r
- checked: true,\r
- fieldLabel: 'Favorite Color',\r
- boxLabel: 'Red',\r
- name: 'fav-color',\r
- inputValue: 'red'\r
- },{\r
- fieldLabel: '',\r
- labelSeparator: '',\r
- boxLabel: 'Blue',\r
- name: 'fav-color',\r
- inputValue: 'blue'\r
- },{\r
- fieldLabel: '',\r
- labelSeparator: '',\r
- boxLabel: 'Green',\r
- name: 'fav-color',\r
- inputValue: 'green'\r
- }]\r
- }\r
- }]\r
- },{\r
- \r
- /*====================================================================\r
- * CheckGroup examples\r
- *====================================================================*/\r
- \r
- xtype:'fieldset',\r
- title: 'Checkbox Groups',\r
- autoHeight: true,\r
- layout: 'form',\r
- items: [{\r
- xtype: 'textfield',\r
- name: 'txt-test3',\r
- fieldLabel: 'Alignment Test',\r
- anchor: '95%'\r
- },{\r
- // Use the default, automatic layout to distribute the controls evenly\r
- // across a single row\r
- xtype: 'checkboxgroup',\r
- fieldLabel: 'Auto Layout',\r
- items: [\r
- {boxLabel: 'Item 1', name: 'cb-auto-1'},\r
- {boxLabel: 'Item 2', name: 'cb-auto-2', checked: true},\r
- {boxLabel: 'Item 3', name: 'cb-auto-3'},\r
- {boxLabel: 'Item 4', name: 'cb-auto-4'},\r
- {boxLabel: 'Item 5', name: 'cb-auto-5'}\r
- ]\r
- },{\r
- xtype: 'checkboxgroup',\r
- fieldLabel: 'Single Column',\r
- itemCls: 'x-check-group-alt',\r
- // Put all controls in a single column with width 100%\r
- columns: 1,\r
- items: [\r
- {boxLabel: 'Item 1', name: 'cb-col-1'},\r
- {boxLabel: 'Item 2', name: 'cb-col-2', checked: true},\r
- {boxLabel: 'Item 3', name: 'cb-col-3'}\r
- ]\r
- },{\r
- xtype: 'checkboxgroup',\r
- fieldLabel: 'Multi-Column (horizontal)',\r
- // Distribute controls across 3 even columns, filling each row\r
- // from left to right before starting the next row\r
- columns: 3,\r
- items: [\r
- {boxLabel: 'Item 1', name: 'cb-horiz-1'},\r
- {boxLabel: 'Item 2', name: 'cb-horiz-2', checked: true},\r
- {boxLabel: 'Item 3', name: 'cb-horiz-3'},\r
- {boxLabel: 'Item 4', name: 'cb-horiz-4'},\r
- {boxLabel: 'Item 5', name: 'cb-horiz-5'}\r
- ]\r
- },{\r
- xtype: 'checkboxgroup',\r
- fieldLabel: 'Multi-Column (vertical)',\r
- itemCls: 'x-check-group-alt',\r
- // Distribute controls across 3 even columns, filling each column\r
- // from top to bottom before starting the next column\r
- columns: 3,\r
- vertical: true,\r
- items: [\r
- {boxLabel: 'Item 1', name: 'cb-vert-1'},\r
- {boxLabel: 'Item 2', name: 'cb-vert-2', checked: true},\r
- {boxLabel: 'Item 3', name: 'cb-vert-3'},\r
- {boxLabel: 'Item 4', name: 'cb-vert-4'},\r
- {boxLabel: 'Item 5', name: 'cb-vert-5'}\r
- ]\r
- },{\r
- xtype: 'checkboxgroup',\r
- fieldLabel: 'Multi-Column<br />(custom widths)',\r
- // Specify exact column widths (could also include float values for %)\r
- columns: [100, 100],\r
- vertical: true,\r
- items: [\r
- {boxLabel: 'Item 1', name: 'cb-custwidth', inputValue: 1},\r
- {boxLabel: 'Item 2', name: 'cb-custwidth', inputValue: 2, checked: true},\r
- {boxLabel: 'Item 3', name: 'cb-custwidth', inputValue: 3},\r
- {boxLabel: 'Item 4', name: 'cb-custwidth', inputValue: 4},\r
- {boxLabel: 'Item 5', name: 'cb-custwidth', inputValue: 5}\r
- ]\r
- },{\r
- xtype: 'checkboxgroup',\r
- itemCls: 'x-check-group-alt',\r
- fieldLabel: 'Custom Layout<br />(w/ validation)',\r
- allowBlank: false,\r
- anchor: '95%',\r
- items: [{\r
- // You can pass sub-item arrays along with width/columnWidth configs \r
- // ColumnLayout-style for complete layout control. In this example we\r
- // only want one item in the middle column, which would not be possible\r
- // using the columns config. We also want to make sure that our headings\r
- // end up at the top of each column as expected.\r
- columnWidth: '.25',\r
- items: [\r
- {xtype: 'label', text: 'Heading 1', cls:'x-form-check-group-label', anchor:'-15'},\r
- {boxLabel: 'Item 1', name: 'cb-cust-1'},\r
- {boxLabel: 'Item 2', name: 'cb-cust-2'}\r
- ]\r
- },{\r
- columnWidth: '.5',\r
- items: [\r
- {xtype: 'label', text: 'Heading 2', cls:'x-form-check-group-label', anchor:'-15'},\r
- {boxLabel: 'A long item just for fun', name: 'cb-cust-3'}\r
- ]\r
- },{\r
- columnWidth: '.25',\r
- items: [\r
- {xtype: 'label', text: 'Heading 3', cls:'x-form-check-group-label', anchor:'-15'},\r
- {boxLabel: 'Item 4', name: 'cb-cust-4'},\r
- {boxLabel: 'Item 5', name: 'cb-cust-5'}\r
- ]\r
- }]\r
- }]\r
- },{\r
- \r
- /*====================================================================\r
- * RadioGroup examples\r
- *====================================================================*/\r
- // NOTE: These radio examples use the exact same options as the checkbox ones\r
- // above, so the comments will not be repeated. Please see comments above for\r
- // additional explanation on some config options.\r
- \r
- xtype:'fieldset',\r
- title: 'Radio Groups',\r
- autoHeight: true,\r
- items: [{\r
- xtype: 'textfield',\r
- name: 'txt-test4',\r
- fieldLabel: 'Alignment Test',\r
- anchor: '95%'\r
- },{\r
- xtype: 'radiogroup',\r
- fieldLabel: 'Auto Layout',\r
- items: [\r
- {boxLabel: 'Item 1', name: 'rb-auto', inputValue: 1},\r
- {boxLabel: 'Item 2', name: 'rb-auto', inputValue: 2, checked: true},\r
- {boxLabel: 'Item 3', name: 'rb-auto', inputValue: 3},\r
- {boxLabel: 'Item 4', name: 'rb-auto', inputValue: 4},\r
- {boxLabel: 'Item 5', name: 'rb-auto', inputValue: 5}\r
- ]\r
- },{\r
- xtype: 'radiogroup',\r
- fieldLabel: 'Single Column',\r
- itemCls: 'x-check-group-alt',\r
- columns: 1,\r
- items: [\r
- {boxLabel: 'Item 1', name: 'rb-col', inputValue: 1},\r
- {boxLabel: 'Item 2', name: 'rb-col', inputValue: 2, checked: true},\r
- {boxLabel: 'Item 3', name: 'rb-col', inputValue: 3}\r
- ]\r
- },{\r
- xtype: 'radiogroup',\r
- fieldLabel: 'Multi-Column<br />(horiz. auto-width)',\r
- columns: 3,\r
- items: [\r
- {boxLabel: 'Item 1', name: 'rb-horiz', inputValue: 1},\r
- {boxLabel: 'Item 2', name: 'rb-horiz', inputValue: 2, checked: true},\r
- {boxLabel: 'Item 3', name: 'rb-horiz', inputValue: 3},\r
- {boxLabel: 'Item 4', name: 'rb-horiz', inputValue: 4},\r
- {boxLabel: 'Item 5', name: 'rb-horiz', inputValue: 5}\r
- ]\r
- },{\r
- xtype: 'radiogroup',\r
- fieldLabel: 'Multi-Column<br />(vert. auto-width)',\r
- itemCls: 'x-check-group-alt',\r
- columns: 3,\r
- vertical: true,\r
- items: [\r
- {boxLabel: 'Item 1', name: 'rb-vert', inputValue: 1},\r
- {boxLabel: 'Item 2', name: 'rb-vert', inputValue: 2, checked: true},\r
- {boxLabel: 'Item 3', name: 'rb-vert', inputValue: 3},\r
- {boxLabel: 'Item 4', name: 'rb-vert', inputValue: 4},\r
- {boxLabel: 'Item 5', name: 'rb-vert', inputValue: 5}\r
- ]\r
- },{\r
- xtype: 'radiogroup',\r
- fieldLabel: 'Multi-Column<br />(custom widths)',\r
- columns: [100, 100],\r
- vertical: true,\r
- items: [\r
- {boxLabel: 'Item 1', name: 'rb-custwidth', inputValue: 1},\r
- {boxLabel: 'Item 2', name: 'rb-custwidth', inputValue: 2, checked: true},\r
- {boxLabel: 'Item 3', name: 'rb-custwidth', inputValue: 3},\r
- {boxLabel: 'Item 4', name: 'rb-custwidth', inputValue: 4},\r
- {boxLabel: 'Item 5', name: 'rb-custwidth', inputValue: 5}\r
- ]\r
- },{\r
- xtype: 'radiogroup',\r
- itemCls: 'x-check-group-alt',\r
- fieldLabel: 'Custom Layout<br />(w/ validation)',\r
- allowBlank: false,\r
- anchor: '95%',\r
- items: [{\r
- columnWidth: '.25',\r
- items: [\r
- {xtype: 'label', text: 'Heading 1', cls:'x-form-check-group-label', anchor:'-15'},\r
- {boxLabel: 'Item 1', name: 'rb-cust', inputValue: 1},\r
- {boxLabel: 'Item 2', name: 'rb-cust', inputValue: 2}\r
- ]\r
- },{\r
- columnWidth: '.5',\r
- items: [\r
- {xtype: 'label', text: 'Heading 2', cls:'x-form-check-group-label', anchor:'-15'},\r
- {boxLabel: 'A long item just for fun', name: 'rb-cust', inputValue: 3}\r
- ]\r
- },{\r
- columnWidth: '.25',\r
- items: [\r
- {xtype: 'label', text: 'Heading 3', cls:'x-form-check-group-label', anchor:'-15'},\r
- {boxLabel: 'Item 4', name: 'rb-cust', inputValue: 4},\r
- {boxLabel: 'Item 5', name: 'rb-cust', inputValue: 5}\r
- ]\r
- }]\r
- }]\r
- }],\r
- \r
- buttons: [{\r
- text: 'Save',\r
- handler: function(){\r
- if(fp.getForm().isValid()){\r
- Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+ \r
- fp.getForm().getValues(true).replace(/&/g,', '));\r
- }\r
- }\r
- },{\r
- text: 'Reset',\r
- handler: function(){\r
- fp.getForm().reset();\r
- }\r
- }]\r
- });\r
-});\r
+/*!
+ * Ext JS Library 3.1.1
+ * Copyright(c) 2006-2010 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%'
+ },{
+ // 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();
+ }
+ }]
+ });
+});
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff