EXT js có một cột các nút radio

Question

Tôi có một ext js lưới như dưới đây:

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

Bây giờ tôi cần phải chứng minh Id tài khoản cột như một cột các nút radio. Vì vậy, từ người dùng lưới có thể chọn một Id tài khoản và gửi. Khi người dùng tải lại trang, id tài khoản đó sẽ được chọn trước.

Tôi cần một số trợ giúp về cách tiếp tục điều này. Tôi có cần phải viết trình kết xuất trên cột Id tài khoản không? Hoặc là có một cách dễ dàng hơn.

EDIT: Tôi đã làm như thế này:

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

cú pháp để thêm một sự kiện onclick hoặc onchange sự kiện vào nhóm đài phát thanh là gì?

Answer 1

Bạn đã làm tốt việc hiển thị cột Id tài khoản dưới dạng cột của nút radio, bằng cách sử dụng hàm kết xuất đồ họa.

Về sự kiện onclick cho này, bạn có thể chỉ cần thêm thuộc tính onclick trong thẻ HTML:

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

Answer 2

Xây dựng ra câu trả lời trước đó, vâng, tôi nghĩ rằng sử dụng một renderer cho cột của bạn là giải pháp đúng . Tôi nghĩ rằng bạn nên đi về sự kiện nhấp chuột khác với J. Bruni đề xuất mặc dù. Tôi muốn giới thiệu một người nghe nhấp chuột trên bảng điều khiển lưới của bạn để kiểm tra xem bạn có nhấp vào nút radio hay không và ủy quyền cho một phương thức trong GridPanel của bạn.

Something như thế này:

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 
     } 
    } 
});