ExtJS中grid的复选按扭换成单选按扭

我是在《ExtJS实现完美Grid(1)》上改的，grid定义这里不再讲

1、在ext-all.css后边加三个样式

.checked{background-image:url(../images/default/menu/checked.gif)}
.unchecked{background-image:url(../images/default/menu/unchecked.gif)}
.x-grid3-row-radioBtn{background-image:url(../images/default/grid/row-radio-sprite.gif); /*一个radio图片*/}
我这有个自己做的单选框图片

2、为grid添load事件监听

//单选radio近扭
var gridEl=grid.getEl();
gridEl.select('div.x-grid3-hd-checker').removeClass('x-grid3-hd-checker'); //删除表头的checkbox
grid.store.on('load', function() { //数据加载完毕替换为checkbox列增加一个class，然后我们在这个class中修改图片
     gridEl.select("div[class=x-grid3-row-checker]").each(function(x) {
     x.addClass('x-grid3-row-radioBtn');
     });
});

grid.getView().on('rowupdated', function() { //数据加载完毕替换为checkbox列增加一个class，然后我们在这个class中修改图片
     gridEl.select("div[class=x-grid3-row-checker]").each(function(x) {
     x.addClass('x-grid3-row-radioBtn');  
     });
});

这样我们就实现了复选按扭换成单选按扭

来看一下效果吧：