EditorGridPanel 中的checkbox 选中,不选中的问题

最新推荐文章于 2018-06-17 09:52:53 发布

原创最新推荐文章于 2018-06-17 09:52:53 发布 · 2.7k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

ExtJS

在使用 ExtJS 进行数据库编程时，遇到Checkbox选中状态与数据库中status值不符的问题。当status存储的是'Y'/'N'而非true/false时，Checkbox默认显示不正确。解决方法包括修改 CheckColumn 的 renderer 方法，以及在 EditorGridPanel 中处理 onMouseDown 事件以正确切换状态。通过这些修改，可以确保Checkbox状态与数据库状态同步。

使用 Extjs 在进行数据库编程经常会遇到 checkbox 的问题(奇怪网上却没有此类文章不知道其他人是怎么解决的,在此贴上我的方法,如有问题或建议,欢迎指正), 比如在数据中的 status 存储的值为 'Y' / 'N' 或者是其他非 true / false 的值, 要求显示在gridPanel 中, 如果不进行转换,显示的时候就会有问题,因为 gridPanel 中的 Checkbox(CheckColumn) 的值默认为只有两种： true / false. 这样的话只要 status 的值不为空, 显示到页面的时候 checkbox 都会自动勾上;

解决的办法就是, 修改 checkcolumn.js 中 renderer 方法如下：

renderer : function(v, p, record){ p.css += ' x-grid3-check-col-td'; return String.format('<div class="x-grid3-check-col{0} {1}"> </div>', v=='Y' || v== true ? '-on' : '', this.createId()); }

如果还要在 gridPanel 中进行编辑的话(EditorGridPanel), 只修改 renderer 方法是不够的, 原因和上面一样,还需要修改 onMouseDown (鼠标点击)方法, 代码如下：

var value = record.data[this.dataIndex]; switch(value) { case 'Y': value = 'N'; break; case 'N': value = 'Y'; break; default: value = !value; } record.set(this.dataIndex, value);

标签

#extjs #function #数据库 #class #编程