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

Fiddle

您需要在查询中添加radiogroup

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

Answer 2

尝试更改行

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

到

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

检查fiddle

Answer 3

或者您可以使用您的第一个电台项目的ID来选择他 here is the fiddle

＆＃13;

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

＆＃13;

Answer 4

我想阻止你在可能的情况下使用Ext.ComponentQuery和长items.items[]字符串 - 如果页面中添加了更多的无线电组，或者将来有什么东西在洗牌，你和＃39;将到处修补它并调整处理程序正在改变的项[x]或radiogroup [x]。

我建议添加对您喜欢的默认广播的引用：

reference: 'defaultRadio',

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

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

您可以在此fiddle中看到的内容完成同样的事情，并且更具可读性。

这将查看包含按钮的面板，并找到包含在同一面板中的参考defaultRadio的广播。此代码在应用程序中更容易共享，并且如果您决定另一个无线电应该是默认的（即只更改哪个无线电有参考），则易于更改。

ExtJs：如何在按钮点击事件中选择Radiogroup的第一项

4 个答案: