check-radio.js
上传用户:dawnssy
上传日期:2022-08-06
资源大小:9345k
文件大小:13k
源码类别:

JavaScript

开发平台:

JavaScript

  1. /*!
  2.  * Ext JS Library 3.1.0
  3.  * Copyright(c) 2006-2009 Ext JS, LLC
  4.  * licensing@extjs.com
  5.  * http://www.extjs.com/license
  6.  */
  7. Ext.onReady(function(){
  8.     Ext.QuickTips.init();
  9.     
  10.     // turn on validation errors beside the field globally
  11.     Ext.form.Field.prototype.msgTarget = 'side';
  12.     /*====================================================================
  13.      * Individual checkbox/radio examples
  14.      *====================================================================*/
  15.     
  16.     // Using checkbox/radio groups will generally be easier and more flexible than
  17.     // using individual checkbox and radio controls, but this shows that you can
  18.     // certainly do so if you only need a single control, or if you want to control  
  19.     // exactly where each check/radio goes within your layout.
  20.     var individual = [{
  21.         bodyStyle: 'padding-right:5px;',
  22.         items: {
  23.             xtype: 'fieldset',
  24.             title: 'Individual Checkboxes',
  25.             autoHeight: true,
  26.             defaultType: 'checkbox', // each item will be a checkbox
  27.             items: [{
  28.                 xtype: 'textfield',
  29.                 name: 'txt-test1',
  30.                 fieldLabel: 'Alignment Test'
  31.             }, {
  32.                 fieldLabel: 'Favorite Animals',
  33.                 boxLabel: 'Dog',
  34.                 name: 'fav-animal-dog'
  35.             }, {
  36.                 fieldLabel: '',
  37.                 labelSeparator: '',
  38.                 boxLabel: 'Cat',
  39.                 name: 'fav-animal-cat'
  40.             }, {
  41.                 checked: true,
  42.                 fieldLabel: '',
  43.                 labelSeparator: '',
  44.                 boxLabel: 'Monkey',
  45.                 name: 'fav-animal-monkey'
  46.             }]
  47.         }
  48.     }, {
  49.         bodyStyle: 'padding-left:5px;',
  50.         items: {
  51.             xtype: 'fieldset',
  52.             title: 'Individual Radios',
  53.             autoHeight: true,
  54.             defaultType: 'radio', // each item will be a radio button
  55.             items: [{
  56.                 xtype: 'textfield',
  57.                 name: 'txt-test2',
  58.                 fieldLabel: 'Alignment Test'
  59.             }, {
  60.                 checked: true,
  61.                 fieldLabel: 'Favorite Color',
  62.                 boxLabel: 'Red',
  63.                 name: 'fav-color',
  64.                 inputValue: 'red'
  65.             }, {
  66.                 fieldLabel: '',
  67.                 labelSeparator: '',
  68.                 boxLabel: 'Blue',
  69.                 name: 'fav-color',
  70.                 inputValue: 'blue'
  71.             }, {
  72.                 fieldLabel: '',
  73.                 labelSeparator: '',
  74.                 boxLabel: 'Green',
  75.                 name: 'fav-color',
  76.                 inputValue: 'green'
  77.             }]
  78.         }
  79.     }];
  80.     
  81.     /*====================================================================
  82.      * CheckGroup example
  83.      *====================================================================*/
  84.     var checkGroup = {
  85.         xtype: 'fieldset',
  86.         title: 'Checkbox Groups (initially collapsed)',
  87.         autoHeight: true,
  88.         layout: 'form',
  89.         collapsed: true,   // initially collapse the group
  90.         collapsible: true,
  91.         items: [{
  92.             xtype: 'textfield',
  93.             name: 'txt-test3',
  94.             fieldLabel: 'Alignment Test',
  95.             anchor: '95%'
  96.         },{
  97.             // Use the default, automatic layout to distribute the controls evenly
  98.             // across a single row
  99.             xtype: 'checkboxgroup',
  100.             fieldLabel: 'Auto Layout',
  101.             items: [
  102.                 {boxLabel: 'Item 1', name: 'cb-auto-1'},
  103.                 {boxLabel: 'Item 2', name: 'cb-auto-2', checked: true},
  104.                 {boxLabel: 'Item 3', name: 'cb-auto-3'},
  105.                 {boxLabel: 'Item 4', name: 'cb-auto-4'},
  106.                 {boxLabel: 'Item 5', name: 'cb-auto-5'}
  107.             ]
  108.         },{
  109.             xtype: 'checkboxgroup',
  110.             fieldLabel: 'Single Column',
  111.             itemCls: 'x-check-group-alt',
  112.             // Put all controls in a single column with width 100%
  113.             columns: 1,
  114.             items: [
  115.                 {boxLabel: 'Item 1', name: 'cb-col-1'},
  116.                 {boxLabel: 'Item 2', name: 'cb-col-2', checked: true},
  117.                 {boxLabel: 'Item 3', name: 'cb-col-3'}
  118.             ]
  119.         },{
  120.             xtype: 'checkboxgroup',
  121.             fieldLabel: 'Multi-Column (horizontal)',
  122.             // Distribute controls across 3 even columns, filling each row
  123.             // from left to right before starting the next row
  124.             columns: 3,
  125.             items: [
  126.                 {boxLabel: 'Item 1', name: 'cb-horiz-1'},
  127.                 {boxLabel: 'Item 2', name: 'cb-horiz-2', checked: true},
  128.                 {boxLabel: 'Item 3', name: 'cb-horiz-3'},
  129.                 {boxLabel: 'Item 4', name: 'cb-horiz-4'},
  130.                 {boxLabel: 'Item 5', name: 'cb-horiz-5'}
  131.             ]
  132.         },{
  133.             xtype: 'checkboxgroup',
  134.             fieldLabel: 'Multi-Column (vertical)',
  135.             itemCls: 'x-check-group-alt',
  136.             // Distribute controls across 3 even columns, filling each column
  137.             // from top to bottom before starting the next column
  138.             columns: 3,
  139.             vertical: true,
  140.             items: [
  141.                 {boxLabel: 'Item 1', name: 'cb-vert-1'},
  142.                 {boxLabel: 'Item 2', name: 'cb-vert-2', checked: true},
  143.                 {boxLabel: 'Item 3', name: 'cb-vert-3'},
  144.                 {boxLabel: 'Item 4', name: 'cb-vert-4'},
  145.                 {boxLabel: 'Item 5', name: 'cb-vert-5'}
  146.             ]
  147.         },{
  148.             xtype: 'checkboxgroup',
  149.             fieldLabel: 'Multi-Column<br />(custom widths)',
  150.             // Specify exact column widths (could also include float values for %)
  151.             columns: [100, 100],
  152.             vertical: true,
  153.             items: [
  154.                 {boxLabel: 'Item 1', name: 'cb-custwidth', inputValue: 1},
  155.                 {boxLabel: 'Item 2', name: 'cb-custwidth', inputValue: 2, checked: true},
  156.                 {boxLabel: 'Item 3', name: 'cb-custwidth', inputValue: 3},
  157.                 {boxLabel: 'Item 4', name: 'cb-custwidth', inputValue: 4},
  158.                 {boxLabel: 'Item 5', name: 'cb-custwidth', inputValue: 5}
  159.             ]
  160.         },{
  161.             xtype: 'checkboxgroup',
  162.             itemCls: 'x-check-group-alt',
  163.             fieldLabel: 'Custom Layout<br />(w/ validation)',
  164.             allowBlank: false,
  165.             anchor: '95%',
  166.             items: [{
  167.                 // You can pass sub-item arrays along with width/columnWidth configs 
  168.                 // ColumnLayout-style for complete layout control.  In this example we
  169.                 // only want one item in the middle column, which would not be possible
  170.                 // using the columns config.  We also want to make sure that our headings
  171.                 // end up at the top of each column as expected.
  172.                 columnWidth: '.25',
  173.                 items: [
  174.                     {xtype: 'label', text: 'Heading 1', cls:'x-form-check-group-label', anchor:'-15'},
  175.                     {boxLabel: 'Item 1', name: 'cb-cust-1'},
  176.                     {boxLabel: 'Item 2', name: 'cb-cust-2'}
  177.                 ]
  178.             },{
  179.                 columnWidth: '.5',
  180.                 items: [
  181.                     {xtype: 'label', text: 'Heading 2', cls:'x-form-check-group-label', anchor:'-15'},
  182.                     {boxLabel: 'A long item just for fun', name: 'cb-cust-3'}
  183.                 ]
  184.             },{
  185.                 columnWidth: '.25',
  186.                 items: [
  187.                     {xtype: 'label', text: 'Heading 3', cls:'x-form-check-group-label', anchor:'-15'},
  188.                     {boxLabel: 'Item 4', name: 'cb-cust-4'},
  189.                     {boxLabel: 'Item 5', name: 'cb-cust-5'}
  190.                 ]
  191.             }]
  192.         }]
  193.     };
  194.     
  195.     /*====================================================================
  196.      * RadioGroup examples
  197.      *====================================================================*/
  198.     // NOTE: These radio examples use the exact same options as the checkbox ones
  199.     // above, so the comments will not be repeated.  Please see comments above for
  200.     // additional explanation on some config options.
  201.     
  202.     var radioGroup = {
  203.         
  204.         xtype: 'fieldset',
  205.         title: 'Radio Groups',
  206.         autoHeight: true,
  207.         items: [{
  208.             xtype: 'textfield',
  209.             name: 'txt-test4',
  210.             fieldLabel: 'Alignment Test',
  211.             anchor: '95%'
  212.         },{
  213.             xtype: 'radiogroup',
  214.             fieldLabel: 'Auto Layout',
  215.             items: [
  216.                 {boxLabel: 'Item 1', name: 'rb-auto', inputValue: 1},
  217.                 {boxLabel: 'Item 2', name: 'rb-auto', inputValue: 2, checked: true},
  218.                 {boxLabel: 'Item 3', name: 'rb-auto', inputValue: 3},
  219.                 {boxLabel: 'Item 4', name: 'rb-auto', inputValue: 4},
  220.                 {boxLabel: 'Item 5', name: 'rb-auto', inputValue: 5}
  221.             ]
  222.         },{
  223.             xtype: 'radiogroup',
  224.             fieldLabel: 'Single Column',
  225.             itemCls: 'x-check-group-alt',
  226.             columns: 1,
  227.             items: [
  228.                 {boxLabel: 'Item 1', name: 'rb-col', inputValue: 1},
  229.                 {boxLabel: 'Item 2', name: 'rb-col', inputValue: 2, checked: true},
  230.                 {boxLabel: 'Item 3', name: 'rb-col', inputValue: 3}
  231.             ]
  232.         },{
  233.             xtype: 'radiogroup',
  234.             fieldLabel: 'Multi-Column<br />(horiz. auto-width)',
  235.             columns: 3,
  236.             items: [
  237.                 {boxLabel: 'Item 1', name: 'rb-horiz', inputValue: 1},
  238.                 {boxLabel: 'Item 2', name: 'rb-horiz', inputValue: 2, checked: true},
  239.                 {boxLabel: 'Item 3', name: 'rb-horiz', inputValue: 3},
  240.                 {boxLabel: 'Item 4', name: 'rb-horiz', inputValue: 4},
  241.                 {boxLabel: 'Item 5', name: 'rb-horiz', inputValue: 5}
  242.             ]
  243.         },{
  244.             xtype: 'radiogroup',
  245.             fieldLabel: 'Multi-Column<br />(vert. auto-width)',
  246.             itemCls: 'x-check-group-alt',
  247.             columns: 3,
  248.             vertical: true,
  249.             items: [
  250.                 {boxLabel: 'Item 1', name: 'rb-vert', inputValue: 1},
  251.                 {boxLabel: 'Item 2', name: 'rb-vert', inputValue: 2, checked: true},
  252.                 {boxLabel: 'Item 3', name: 'rb-vert', inputValue: 3},
  253.                 {boxLabel: 'Item 4', name: 'rb-vert', inputValue: 4},
  254.                 {boxLabel: 'Item 5', name: 'rb-vert', inputValue: 5}
  255.             ]
  256.         },{
  257.             xtype: 'radiogroup',
  258.             fieldLabel: 'Multi-Column<br />(custom widths)',
  259.             columns: [100, 100],
  260.             vertical: true,
  261.             items: [
  262.                 {boxLabel: 'Item 1', name: 'rb-custwidth', inputValue: 1},
  263.                 {boxLabel: 'Item 2', name: 'rb-custwidth', inputValue: 2, checked: true},
  264.                 {boxLabel: 'Item 3', name: 'rb-custwidth', inputValue: 3},
  265.                 {boxLabel: 'Item 4', name: 'rb-custwidth', inputValue: 4},
  266.                 {boxLabel: 'Item 5', name: 'rb-custwidth', inputValue: 5}
  267.             ]
  268.         },{
  269.             xtype: 'radiogroup',
  270.             itemCls: 'x-check-group-alt',
  271.             fieldLabel: 'Custom Layout<br />(w/ validation)',
  272.             allowBlank: false,
  273.             anchor: '95%',
  274.             items: [{
  275.                 columnWidth: '.25',
  276.                 items: [
  277.                     {xtype: 'label', text: 'Heading 1', cls:'x-form-check-group-label', anchor:'-15'},
  278.                     {boxLabel: 'Item 1', name: 'rb-cust', inputValue: 1},
  279.                     {boxLabel: 'Item 2', name: 'rb-cust', inputValue: 2}
  280.                 ]
  281.             },{
  282.                 columnWidth: '.5',
  283.                 items: [
  284.                     {xtype: 'label', text: 'Heading 2', cls:'x-form-check-group-label', anchor:'-15'},
  285.                     {boxLabel: 'A long item just for fun', name: 'rb-cust', inputValue: 3}
  286.                 ]
  287.             },{
  288.                 columnWidth: '.25',
  289.                 items: [
  290.                     {xtype: 'label', text: 'Heading 3', cls:'x-form-check-group-label', anchor:'-15'},
  291.                     {boxLabel: 'Item 4', name: 'rb-cust', inputValue: 4},
  292.                     {boxLabel: 'Item 5', name: 'rb-cust', inputValue: 5}
  293.                 ]
  294.             }]
  295.         }]
  296.     };
  297.     
  298.     // combine all that into one huge form
  299.     var fp = new Ext.FormPanel({
  300.         title: 'Check/Radio Groups Example',
  301.         frame: true,
  302.         labelWidth: 110,
  303.         width: 600,
  304.         renderTo:'form-ct',
  305.         bodyStyle: 'padding:0 10px 0;',
  306.         items: [
  307.             {
  308.                 layout: 'column',
  309.                 border: false,
  310.                 // defaults are applied to all child items unless otherwise specified by child item
  311.                 defaults: {
  312.                     columnWidth: '.5',
  313.                     border: false
  314.                 },            
  315.                 items: individual
  316.             },
  317.             checkGroup,
  318.             radioGroup
  319.         ],
  320.         buttons: [{
  321.             text: 'Save',
  322.             handler: function(){
  323.                if(fp.getForm().isValid()){
  324.                     Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+ 
  325.                         fp.getForm().getValues(true).replace(/&/g,', '));
  326.                 }
  327.             }
  328.         },{
  329.             text: 'Reset',
  330.             handler: function(){
  331.                 fp.getForm().reset();
  332.             }
  333.         }]
  334.     });
  335. });