extjs Ext.form.RadioGroup单选按钮组件学习

西京刀客

于 2023-06-17 22:44:27 发布

阅读量1.6k

点赞数

分类专栏： web前端/桌面前端/js/ts/ui设计/ 文章标签： extjs 前端

本文链接：https://blog.csdn.net/inthat/article/details/131265672

版权

web前端/桌面前端/js/ts/ui设计/ 专栏收录该内容

74 篇文章 19 订阅

订阅专栏

extjs Ext.form.RadioGroup单选按钮组件学习

Summary

概述

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.

一个表单字段容器 Ext.form.FieldContainer 有一个特定的布局排列单选按钮Radio字段(Ext.form.field.Radio)以列方式，提供了方便的Ext.form.field.Field字段方法获取、设置和校验一组radio单选框按钮作为一个整体。

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.

默认的radioGroup布局很简答的安排radio按钮列布局。查看columns 和 vertical配置文件了解更多。你也可以使用一个完全不同的布局通过设置一个其他支持的布局；例如你可以使用自定义的排列使用 hbox 和 vbox容器。在这种情况下 Radio组件依然被 RadioGroup的校验管理。

总结：

注意一个radiogroup下的组件 name配置项一定要一样，这样同时就只能选中一个按钮，切换时其他的按钮就不会还是选中状态。

更正（监听事件）：这个是在单radio下，几个单radio放到了Ext.form.FieldContainer中测试的。所以监听选中的值是true or false代表有没有选中radio。
每个子组件的都可以监听事件，如下，其中change事件的回调函数的第二参数newValue，在选中该按钮选项时是true，切换到其他单选按钮时回调是false。（仅仅失去焦点不回调）
查看总结5描述

例子：

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')

    }
]

注意,这里的 name属性值，就是提交表单提交的参数，inputValue就是其值
如： name: ‘addr’
inputValue:‘ipv4’
那么那么表单提交的参数就是abbr=ipv4

这里对比ComboBox下拉菜单组件，
name一样是对应的提交参数，它的值由valueField指定是那个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',

如何让radiogroup组件的fieldLabel 离子组件的boxLabel 距离远一点，不要紧挨着?
columns: [150,150],在radioGroup中配置，两个同时调大可以让，两个子组件radio按钮距离更远一点。
已解决：就是指定 labelWidth:140,然而我的label还是和后面的单选框连在一起，查看浏览器演示，发现有样式text-align: right; 页面根据情况如下，添加text-align: left;覆盖。使label靠左排列，这样label内容和单选框就分开了。

对比(RadioGroup和ComboBox)例子：

//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'
},

在RadioGrioup中配置的columns 如下，就是每个子组件（这里就是单选那个按钮加它后面空白的宽度单位px），如下就是第一个单选按钮离第二是60px。

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

测试在 xtype: ‘RadioGroup’, 这一层监听，这次监听change事件的结果取到的值就是，你的子组件radio的inputValue配置的值。

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.