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

最新推荐文章于 2017-02-17 10:44:11 发布

转载最新推荐文章于 2017-02-17 10:44:11 发布 · 2.2k 阅读

文章标签：

#extjs #class #function #url #div

EXTjs 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何将 ExtJS Grid 中的复选框替换为单选按钮，并提供了具体的 CSS 样式及 JavaScript 代码实现。通过这些步骤，可以轻松地在 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');
     });
});

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

来看一下效果吧：