EXTJS 中 radiogroup 的各项所占的宽度不同的解决办法

本文介绍了解决ExtJS中RadioGroup各选项宽度不一致的问题。通过在每个选项中添加容器并设置columnWidth属性，实现了不同长度标签的自定义布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

EXTJS 中 radiogroup 的各项所占的宽度不同的解决办法

2012-03-08 11:14:41| 分类： javascript | 标签：extjs |举报|字号订阅

{ xtype:'radiogroup', name:'imagesource', fieldLabel:'图片来源', submitValue:false, width:180, value:1, items:[{ xtype:'radio', name:'imagesource', boxLabel:'上传图片', inputValue:1

},{ xtype:'radio', name:'imagesource', boxLabel:'从图片库中选择', inputValue:2 }] }

由于radiogroup中的两项的标签长度不同，而radiogroup默认各项的长度是等长的，即使在每个radio中单独设定长度也不管用，这样页面展示出来会在两项中间有很多空白

看了extjs3.4中的例子，找到了解决办法，即在radiogroup的每项中加一层容器，指定容器的columnWidth即可，修改后的代码如下：

 {
          xtype:'radiogroup',
          name:'imagesource',
          fieldLabel:'图片来源',
          submitValue:false,
          width:180,
          value:1,
          items:[{
           columnWidth:.4,
           items:[{
            xtype:'radio',
            name:'imagesource',
            boxLabel:'上传图片',
            inputValue:1
            }]
           },{
            columnWidth:.6,
            items:[{
                xtype:'radio',
                name:'imagesource',
                boxLabel:'从图片库中选择',
                inputValue:2
             }]
           }]
         }