在extjs中添加自定义项到单选按钮 [英] Add custom item to radio button in extjs

问题描述

  {
 xtype：'radiogroup'，
 flex：8，
 vertical：true，
列：1，
 labelWidth：50，
 id：'radio_group_id'，
 fieldLabel：'Group Label'，
项目：[{
 boxLabel：'选项1'，
名称：'rb-auto'，
 inputValue：1，
 checked：true 
} ，{
 boxLabel：'option 2'，
 name：'rb-auto'，
 inputValue：2 
}，{
 boxLabel：'option 3' 
名称：'rb-auto'，
 inputValue：3，
 //这是可能的
项：[{
 xtype：'numberfield'，
 //号码字段设置
}] 
}，{
 boxLabel：'选项4'，
名称：'rb-auto'，
 inputValue：4 
}，{
 boxLabel：'选项5'，
名称：'rb -auto'，
 inputValue：5 
}] 
}，
  

是否可以在选项3旁边添加数字字段，以便在选择单选按钮3时启用它？

或者我必须使用seaprate容器来将单独的数字字段与选项3对齐？

解决方案

您可以将单个按钮的 NumberField 渲染到 boxLabelEl 中。另一种方式是创建两个列布局，并在第二列放置标签和数字字段。

第一种方法的示例： http://jsfiddle.net/NsbyD/2/

I have this radio button group in extjs

{
    xtype: 'radiogroup',
    flex: 8,
    vertical: true,
    columns: 1,
    labelWidth: 50,
    id: 'radio_group_id',
    fieldLabel: 'Group Label',
    items: [{
        boxLabel: 'option 1',
        name: 'rb-auto',
        inputValue: 1,
        checked: true
    }, {
        boxLabel: 'option 2',
        name: 'rb-auto',
        inputValue: 2
    }, {
        boxLabel: 'option 3',
        name: 'rb-auto',
        inputValue: 3,
        // is this somehow possible
        items:[{
            xtype:'numberfield',
            // number field settings
        }]
    }, {
        boxLabel: 'option 4',
        name: 'rb-auto',
        inputValue: 4
    }, {
        boxLabel: 'option 5',
        name: 'rb-auto',
        inputValue: 5
    }]
},

Is it somehow possible to add number field next to option 3 so that it gets enabled when I select radio button 3?

Or I have to use seaprate containers to align separate number field with the option 3?

解决方案

You can for example render NumberField into boxLabelEl of radio button. Another way is to create two column layout and in 2nd column put labels and numberfield.

Example of first approach: http://jsfiddle.net/NsbyD/2/

这篇关于在extjs中添加自定义项到单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！