EXT js网格有一列单选按钮

Question

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

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

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

我需要一些关于如何继续这方面的帮助.我是否需要在"帐户ID"列上编写渲染器？或者有一种更简单的方法.

编辑:我喜欢这样:

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

将onclick事件或onchange事件添加到无线电组的语法是什么？

Answer 1

建立前一个答案,是的,我认为为列使用渲染器是正确的解决方案.我认为你应该以不同于J. Bruni建议的方式进行点击事件.我建议在网格面板上单击一个监听器,检查是否单击了一个单选按钮,并委托给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
        }
    }
});

Answer 2

通过使用渲染器函数，您在将帐户 ID 列显示为单选按钮列方面做得很好。

关于这些的 onclick 事件，您可以简单地在 HTML 标记中添加 onclick 属性：

return "<input onclick='my_function()' type='radio' name = 'primaryRadio' " + (value ? "checked='checked'" : "") + ">";