Extjs中grid如何使column呈现出rdiogroup的样式并可以修改该值

项目需要在grid中需要修改一些值，由于该值是单选值（暂且使用YES和NO两个选项），项目UI要求使用radiogroup的样式来呈现该值，并且可以让用户选择radio来修改。

extjs目前grid支持的column中并没有“radiogroupcolumn”之类的column类，自己写一个这样的类也比较麻烦，于是乎想了一个比较简单的方法，具体实现如下。

1.在该column中使用renderer，使之呈现出radiogroup的样式，代码如下

{
     xtype: 'gridcolumn',
     align:'center',
     renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
         if(value=='yes'){
               return "<input type='radio' value='yes' name='side-"+rowIndex+"' checked='checked' />YES<input type='radio' value='no' name='side-"+rowIndex+"' />NO";
         }else{
              return "<input type='radio' value='yes' name='side-"+rowIndex+"'  />YES<input type='radio' value='no' name='side-"+rowIndex+"' checked='checked'/>NO";
          }
     },
     width: 150,
     defaultWidth: 150,
     dataIndex: 'side',
     text: 'Side'
}

2.上面代码只是呈现了column的样式，点击radio修改值时并不会真正修改column的值，因为这些radio只是渲染上去呈现的样式，value--->radiogroup样式，但是

　radiogroup--->value是不行的，radiogroup并没有与真正的value数据绑定在一起，那怎么办呢？我能想到的就只能利用点击radio的事件来间接修改value了，

　于是在grid中增加监听事件，而grid中现有itemclick事件，所以偷懒实现的方法如下

　　

listeners:{
     itemclick:function(it, record, item, index, e, eOpts){
             if (e.getTarget('input[type="radio"]')) {
                   record.data.side=e.target.value;
             }
     }
}

这段代码的本质是监听grid中itemclick事件，当itemclick点击到的是radio时就触发上面的代码，间接的修改该值。

这个方法虽然有点投机取巧的味道，但是是代码量比较少，使用方便。