docs/source/RadioGroup.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-form-RadioGroup-method-constructor'><span id='Ext-form-RadioGroup'>/**
  19 </span></span> * @class Ext.form.RadioGroup
  20  * @extends Ext.form.CheckboxGroup
  21  * &lt;p&gt;A {@link Ext.form.FieldContainer field container} which has a specialized layout for arranging
  22  * {@link Ext.form.field.Radio} controls into columns, and provides convenience {@link Ext.form.field.Field} methods
  23  * for {@link #getValue getting}, {@link #setValue setting}, and {@link #validate validating} the group
  24  * of radio buttons as a whole.&lt;/p&gt;
  25  * &lt;p&gt;&lt;b&gt;Validation:&lt;/b&gt; Individual radio buttons themselves have no default validation behavior, but
  26  * sometimes you want to require a user to select one of a group of radios. RadioGroup
  27  * allows this by setting the config &lt;tt&gt;{@link #allowBlank}:false&lt;/tt&gt;; when the user does not check at
  28  * one of the radio buttons, the entire group will be highlighted as invalid and the
  29  * {@link #blankText error message} will be displayed according to the {@link #msgTarget} config.&lt;/p&gt;
  30  * &lt;p&gt;&lt;b&gt;Layout:&lt;/b&gt; The default layout for RadioGroup makes it easy to arrange the radio buttons into
  31  * columns; see the {@link #columns} and {@link #vertical} config documentation for details. You may also
  32  * use a completely different layout by setting the {@link #layout} to one of the other supported layout
  33  * types; for instance you may wish to use a custom arrangement of hbox and vbox containers. In that case
  34  * the Radio components at any depth will still be managed by the RadioGroup's validation.&lt;/p&gt;
  35  * &lt;p&gt;Example usage:&lt;/p&gt;
  36  * &lt;pre&gt;&lt;code&gt;
  37 var myRadioGroup = new Ext.form.RadioGroup({
  38     id: 'myGroup',
  39     xtype: 'radiogroup',
  40     fieldLabel: 'Single Column',
  41     // Arrange radio buttons into three columns, distributed vertically
  42     columns: 3,
  43     vertical: true,
  44     items: [
  45         {boxLabel: 'Item 1', name: 'rb', inputValue: '1'},
  46         {boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true},
  47         {boxLabel: 'Item 3', name: 'rb', inputValue: '3'}
  48         {boxLabel: 'Item 4', name: 'rb', inputValue: '4'}
  49         {boxLabel: 'Item 5', name: 'rb', inputValue: '5'}
  50         {boxLabel: 'Item 6', name: 'rb', inputValue: '6'}
  51     ]
  52 });
  53  * &lt;/code&gt;&lt;/pre&gt;
  54  * @constructor
  55  * Creates a new RadioGroup
  56  * @param {Object} config Configuration options
  57  * @xtype radiogroup
  58  */
  59 Ext.define('Ext.form.RadioGroup', {
  60     extend: 'Ext.form.CheckboxGroup',
  61     alias: 'widget.radiogroup',
  62
  63 <span id='Ext-form-RadioGroup-cfg-items'>    /**
  64 </span>     * @cfg {Array} items An Array of {@link Ext.form.field.Radio Radio}s or Radio config objects
  65      * to arrange in the group.
  66      */
  67 <span id='Ext-form-RadioGroup-cfg-allowBlank'>    /**
  68 </span>     * @cfg {Boolean} allowBlank True to allow every item in the group to be blank (defaults to true).
  69      * If allowBlank = false and no items are selected at validation time, {@link @blankText} will
  70      * be used as the error text.
  71      */
  72     allowBlank : true,
  73 <span id='Ext-form-RadioGroup-cfg-blankText'>    /**
  74 </span>     * @cfg {String} blankText Error text to display if the {@link #allowBlank} validation fails
  75      * (defaults to 'You must select one item in this group')
  76      */
  77     blankText : 'You must select one item in this group',
  78
  79     // private
  80     defaultType : 'radiofield',
  81
  82     // private
  83     groupCls : Ext.baseCSSPrefix + 'form-radio-group',
  84
  85     getBoxes: function() {
  86         return this.query('[isRadio]');
  87     }
  88
  89 });
  90 </pre>
  91 </body>
  92 </html>