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

最新推荐文章于 2021-03-17 11:44:02 发布

weixin_30883311

最新推荐文章于 2021-03-17 11:44:02 发布

阅读量50

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lhsneb/p/3314325.html

本文详细介绍了如何使用ExtJS将网格组件中的复选按钮更改为单选按钮，包括添加自定义样式、监听数据加载事件以及修改图片实现功能转换，并通过实例演示了操作效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我是在《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');  
     });
});

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

来看一下效果吧：