我有一个类似下面的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事件添加到广播组的语法是什么?
答案 0 :(得分:8)
建立前一个答案,是的,我认为为列使用渲染器是正确的解决方案。我认为你应该以不同于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
}
}
});
答案 1 :(得分:3)
通过使用渲染器功能,您可以将“帐户ID”列显示为单选按钮列。
关于这些的onclick事件,您只需在HTML标记中添加onclick属性:
return "<input onclick='my_function()' type='radio' name = 'primaryRadio' " + (value ? "checked='checked'" : "") + ">";