Ext JS中单选组切换时如何实现文本框水平并排对齐不重叠

问题根源 #

你现在的代码主要有三个核心错误导致文本框重叠：

• 容器属性写错：default是无效属性，指定子项默认类型应该用defaultType: 'textfield'
• hbox布局的子项没有配置宽度/占比，ExtJS的hbox布局不会自动给子项分配水平空间，未指定尺寸的子项会挤在一起重叠
• 缺少切换时的组件显隐逻辑校准，且容器没有配置defaults统一处理标签宽度、边距等通用属性

修正方案 #

1. 给hbox布局的容器补全正确的defaultType和defaults配置，统一设置子项的flex占比、标签宽度、边距，保证水平空间平均分配
2. 补全rgChange监听函数的正确逻辑，选中不同单选按钮时切换对应文本框的显隐
3. 不需要额外修改布局结构，只要补充缺失的配置即可

修正后的完整代码 #

{
    xtype: 'radiogroup',
    fieldLabel: 'Type',
    name: 'type',
    items: [{
        boxLabel: 'Single IP',
        inputValue: '1',
        checked: true,
    },{
        boxLabel: 'IP Range',
        inputValue: '2'
    }],
    listeners: {
        change: rgChange
    }, 
},{
    // 修正默认子项类型配置
    defaultType: 'textfield',
    layout: 'hbox',
    // 统一配置所有子项的通用属性，避免重复
    defaults: {
        // 每个文本框占1份水平宽度，两个的话就是各占50%，自动分配空间不会重叠
        flex: 1,
        // 统一设置标签宽度，避免标签长度不一导致错位
        labelWidth: 40,
        // 给右侧加边距，避免两个文本框挨太近
        margin: '0 10 0 0'
    },
    items:[{
        xtype: 'textfield',
        itemId: 'iplabel', // 建议用itemId代替全局id，避免id冲突
        fieldLabel:'IP',
    },{
        xtype: 'textfield',
        itemId: 'fromlabel',
        fieldLabel:'From',
        hidden:true,
    },{
        xtype: 'textfield',
        itemId: 'tolabel',
        fieldLabel: 'To',
        hidden:true,
        // 最后一个子项去掉右边距
        margin: 0
    }]
}

rgChange 监听函数示例 #

function rgChange(radiogroup, newValue) {
    const form = radiogroup.up('form');
    const ipField = form.down('#iplabel');
    const fromField = form.down('#fromlabel');
    const toField = form.down('#tolabel');
    
    if (newValue.type === '1') {
        // 选中Single IP
        ipField.show();
        fromField.hide();
        toField.hide();
    } else {
        // 选中IP Range
        ipField.hide();
        fromField.show();
        toField.show();
    }
    // 触发布局重绘，避免显隐后排版错乱
    form.updateLayout();
}

内容的提问来源于stack exchange，提问作者rrahul789