extjs Ext.form.RadioGroup radio button component learning

extjs Ext.form.RadioGroup radio button component learning

Summary

overview

A Ext.form.FieldContainer which has a specialized layout for arranging Ext.form.field.Radio controls into columns, and provides convenience Ext.form.field.Field methods for getting, setting, and validating the group of radio buttons as a whole.

A form field container Ext.form.FieldContainer has a specific layout to arrange the radio button Radio field (Ext.form.field.Radio) in columns, providing convenient Ext.form.field.Field field methods to get, set and Validates a set of radio radio buttons as a whole.

Layout

layout

The default layout for RadioGroup makes it easy to arrange the radio buttons into columns; see the columns and vertical config documentation for details. You may also use a completely different layout by setting the layout to one of the other supported layout types; for instance you may wish to use a custom arrangement of hbox and vbox containers. In that case the Radio components at any depth will still be managed by the RadioGroup’s validation.

The default radioGroup layout is very simple to arrange the radio button column layout. See the columns and vertical configuration files for more information. You can also use a completely different layout by setting one of the other supported layouts; for example you can use custom arrangements using hbox and vbox containers. In this case the Radio component is still managed by the RadioGroup checksum.

Summarize:

Note that the component name configuration items under a radiogroup must be the same, so that only one button can be selected at the same time, and other buttons will not be selected when switching.

Correction (event monitoring): This is tested under a single radio, and several single radios are placed in Ext.form.FieldContainer. So the selected value of the monitor is true or false to indicate whether the radio is selected.
Each subcomponent can listen to events, as follows, where the second parameter newValue of the callback function of the change event is true when the button option is selected, and the callback is false when switching to other radio buttons. (Just lose focus without calling back)
See summary 5 description

example:

items: [
    { boxLabel : '管理模式',name : 'basic_mode',inputValue: 'route',id : 'basic_mode_1', width:80, checked:(rec.mode=='route'),
        listeners: 
        {
            change: 
            {
                fn: function(me, newValue, oldValue)
                {
                    //
                }
            }
        }
    },
    { boxLabel : '镜像模式',name : 'basic_mode',inputValue: ((rec.mode=='mirror' || rec.engin_mode=='mirror')?'mirror':'bridge'),id : 'basic_mode_2', width:80, checked:(rec.mode=='mirror'||rec.mode=='bridge')},
    { boxLabel : '直通模式',name : 'basic_mode',inputValue: ((rec.mode=='bridge' )?'bridge':'bridge'),id : 'basic_mode_3', width:80, checked:(rec.mode=='bridge')},
    { boxLabel : '牵引模式',name : 'basic_mode',inputValue: ((rec.mode=='pull')?'pull':'bridge'),id : 'basic_mode_4', width:80, checked:(rec.mode=='pull')

    }
]

Note that the value of the name attribute here is the parameter submitted by the form, and inputValue is its value,
such as: name: 'addr'
inputValue:'ipv4'
, then the parameter submitted by the form is abbr=ipv4

Here, compared with the ComboBox drop-down menu component,
the name is also the corresponding submission parameter, and its value is specified by valueField as the field

//														xtype:'JComboBox',
//														name:'family',
//														fieldLabel: '类型',
//														store:Ext.create('Ext.data.Store', {
    
    
//														fields: ['abbr', 'name'],
//														data : [
//															  {"abbr":"ipv4", "name":"IPV4"},
//															  {"abbr":"ipv6", "name":"IPV6"}
//														  ]
//														}),
//														value:'ipv4',
//														labelWidth: 110,//标签宽度
//														queryMode: 'local',
//														displayField: 'name',
//														valueField: 'abbr',

2. How to make the fieldLabel of the radiogroup component and the boxLabel of the ion component farther away, not close to each other?
   columns: [150,150], configured in the radioGroup, two simultaneous adjustments can make the distance between the two subcomponent radio buttons a little bit farther.
   Solved: Just specify labelWidth: 140, but my label is still connected with the radio button at the back. Check the browser demo and find that there is a style text-align: right; the page is as follows according to the situation, add text-align: left; cover. Arrange the label to the left, so that the label content and the radio button are separated.

3. Comparison (RadioGroup and ComboBox) example:

//RadioGroup  
{
    
    
    xtype:'JRadioGroup',
    fieldLabel: '状态',
    id: 'basic_state',
  //labelWidth: 110,
    columns : [100,100],
    items:[{
    
    
        boxLabel: '启用',
        name: 'basic_state',
        inputValue: 'up',
        checked: (rec.state == 'up')?true:false
    },{
    
    
        boxLabel: '禁用',
        name: 'basic_state',
        inputValue: 'down',
        checked: (rec.state == 'down')?true:false
    }]
},
//ComboBox   
{
    
    
        xtype: 'JComboBox',
        fieldLabel: '状态',
        store: Ext.create('Ext.data.Store',
                {
    
    
                    fields: ['value', 'name'],
                    data :
                            [
                                {
    
    "value":"up", "name":"启用"},
                                {
    
    "value":"down", "name":"禁用"}
                            ]
                }),
        value: rec.state,
        queryMode: 'local',
        displayField: 'name',
        valueField: 'value',
        id: 'basic_state',
        name: 'basic_state'
},

4. The columns configured in RadioGrioup are as follows, which is each subcomponent (here is the radio button plus the width unit px of the blank space behind it), as follows: the first radio button is 60px away from the second.

xtype:'RadioGroup',
fieldLabel: '类型',
labelWidth: 110,
columns : [60,60],
items:[{
    
    

5. The test listens at the layer of xtype: 'RadioGroup', and the result of listening to the change event this time is the value of the inputValue configuration of your subcomponent radio.

change ( this , newValue , oldValue , eOpts ) 
Fires when the value of a field is changed. The value of a field is checked for changes when the field's setValue method is called and when any of the events listed in checkChangeEvents are fired.
PARAMETERS
this :  Ext.form.field.Field
newValue :  Object
The new value
oldValue :  Object
The original value
eOpts : Object
The options object passed to Ext.util.Observable.addListener.