ExtJs：如何 select 按钮单击事件中 Radiogroup 的第一项

Question

我有一个 radiogroup 按钮单击事件，我想将 radiogroup 的第一项设置为选中。我试过下面的代码，但它不起作用：

Ext.create('Ext.panel.Panel',{
    items: [
    {
                title: "Types",
                items: {
                    xtype: "radiogroup",
                    name: "type",
                    columns: 2,
                    vertical: true,
                    items: [{
                        xtype: "radio",
                        boxLabel: "Vertical",
                        inputValue: "2",
                        style: {
                            marginLeft: '10px',
                            marginRight: '10px'
                        },
                        hideLabel: true,
                        name: "layout",

                    }, {
                        xtype: "radio",
                        boxLabel: "Horizontal",
                        inputValue: "1",
                        style: {
                            marginLeft: '10px',
                            marginRight: '10px'
                        },
                        hideLabel: true,
                        name: "layout"
                    }, {
                        xtype: "radio",
                        boxLabel: "Auto",
                        inputValue: "0",
                        style: {
                            marginLeft: '10px',
                            marginRight: '10px'
                        },
                        hideLabel: true,
                        name: "layout"
                    }]
                }
            }
    , {
        xtype: 'button',
        text: 'Reset',
        handler: function (button) {
            Ext.ComponentQuery.query('[name="type"]').items.items[0].setValue(true);

        }
    }],
    renderTo: Ext.getBody()
});

以上代码无效。我也试过下面的代码。但它也不起作用：

var radioGroup = this.settingsFields.down(_.replace('[name="id"]', 'id', id));
radioGroup.select(radioGroup.getStore().getAt(0));

Answer 1

尝试换行

Ext.ComponentQuery.query('[name="type"]').items.items[0].setValue(true);

至

Ext.ComponentQuery.query('[name="type"]')[0].items.items[0].setValue(true);

检查fiddle

Answer 2

或者你可以使用你的第一个广播项目的 id select 他
here is the fiddle

handler: function() {
  var radio = Ext.getCmp('yourgroupitemid');
  radio.setValue(true);
}

Answer 3

Fiddle

您需要在查询中添加radiogroup

Ext.ComponentQuery.query('radiogroup[name="type"]'[0].items.items[0].setValue(true);

Answer 4

我不建议您尽可能使用 Ext.ComponentQuery 和 items.items[] 的长字符串 - 如果页面中添加了更多单选组，或者将来会出现混乱，您将运行修补它并调整处理程序正在更改的项目 [x] 或 radiogroup[x]。

我建议添加对您想要的默认收音机的引用：

reference: 'defaultRadio',

并通过以下方式在按钮处理程序中到达它：

handler: function (button) {
    button.up("panel").down("radio[reference='defaultRadio']").setValue(true);
}

您可以在此 fiddle 中看到它完成了同样的事情，而且可读性更高。

这将查看包含该按钮的面板，并找到同一面板中包含的具有引用 defaultRadio 的收音机。此代码将更容易在应用程序中共享，并且如果您决定将另一个收音机设为默认（即只需更改具有参考的收音机），则可以轻松更改。

ExtJs：如何 select 按钮单击事件中 Radiogroup 的第一项

ExtJs: How can I select first item of Radiogroup on button click event

extjs

extjs4.2