extjs - 具有一列单选按钮的 EXT js 网格

Question

我有一个 ext js 网格，如下所示:

var grid = new Ext.grid.GridPanel({
columns: [
{header: 'Account Id',dataIndex:'accountId' },
{header: 'Account NUmber',dataIndex:'accountNumber' }
]
})

现在我需要将 Account Id 列显示为单选按钮列。因此，用户可以从网格中选择一个帐户 ID 并提交。当用户重新加载页面时，应该预先选择该帐户 ID。

我需要一些帮助来解决这个问题。我需要在 Account Id 列上编写渲染器吗？或者有没有更简单的方法。

编辑:我确实喜欢这样:

{header: 'Account Id',dataIndex:'accountId',renderer: function(value) {
return "<input type='radio' name = 'primaryRadio' " + (value ? "checked='checked'" : "") + ">";
 }},

向 radio 组添加 onclick 事件或 onchange 事件的语法是什么？

Answer 1

建立上一个答案，是的，我认为为您的列使用渲染器是正确的解决方案。我认为您应该以不同于 J. Bruni 建议的方式处理点击事件。我建议在您的网格面板上安装一个单击监听器，以检查您是否单击了单选按钮，并委托(delegate)给您的 GridPanel 中的方法。

像这样的东西:

MyRadioGrid = Ext.extend(Ext.grid.GridPanel, {
    columns: [
        {header: 'Account Id',dataIndex:'accountId', renderer: function(value) {
            return "<input type='radio' name = 'primaryRadio' " + (value ? "checked='checked'" : "") + ">";
        }},
        {header: 'Account NUmber',dataIndex:'accountNumber' }
    ],

    afterRender: function() {
        MyRadioGrid.superclass.afterRender.apply(this, arguments);
        this.el.on('click', this.checkRadioClick, this);
    },

    checkRadioClick: function(event) {
        if (event.getTarget('input[type="radio"]')) {
            //radio clicked... do something
        }
    }
});