ExtJs笔记1-GridPanel的复选框和工具栏事件自定制

最新推荐文章于 2023-03-22 21:51:41 发布

十四月的清晨

最新推荐文章于 2023-03-22 21:51:41 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： ExtJs笔记文章标签： extjs 工具企业应用 null function html

本文链接：https://blog.youkuaiyun.com/Rainy_Ln/article/details/7531840

ExtJs笔记专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了在ExtJs中处理GridPanel复选框和分页工具栏的自定义方法，针对全选按钮翻页不刷新、复选状态无法记录及刷新无效等问题，通过监听Store的load事件并手动操作DOM实现曲线救国的解决方案。

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

大家都知道，ExtJs的快捷与方便在企业应用的项目中还是优势巨大的，可是灵活性总是差强人意。

这边笔记主要记录下GridPanel复选框和分页底部工具栏的一些灵活方法，应该算是曲线救国的方法，目前只用到这样的，希望以后能找到更好的办法。

情况是这样的，需求一个GridPanel，自带复选框列，带分页工具。按照模板写好后发现以下问题：

1、复选款全选按钮在翻页时无法刷新勾选状态。

2、复选框翻页后无法记录上页选中状态和记录。

3、刷新按钮无效。

经过查找资料和询问，明白了EXT的复选框其实是以DIV样式图片来实现的，并不是HTML标签，所以找到复选框对应的ID，进行手动切换。

绑定时间的入口选取为Store的load()事件，毕竟，翻页和刷新，store都是重新laod数据的。问题暂时解决。

以下是示例代码。

Ext.getCmp(_ID + 'MedicineQueryListGrid').getStore().on("load",
					function() {

					         // 存在详细信息PANEL时删除
						if (Ext.getCmp('detailpanel') != null) {
							Ext.getCmp('detailpanel).destroy();
							Ext.getCmp('id_detail')
									.doLayout();
						}
						// 翻页时清空复选框的头部全选
						var hd_checker = MedicineQueryListGrid.getEl()
								.select('div.x-grid3-hd-checker');

						var hd = hd_checker.first();
						if (hd != null) {
							if (MedicineQueryListGrid.getSelectionModel()
									.getSelections().length !=

							MedicineQueryListGrid.getStore().getCount()) {
								// 清空表格头的checkBox
								if (hd.hasClass('x-grid3-hd-checker-on')) {
									hd.removeClass('x-grid3-hd-checker-on');
								}
							} else {
								if (MedicineQueryListGrid.getStore().getCount() == 0) { // 没有记录的话清空;
									return;
								}
								hd.addClass('x-grid3-hd-checker-on');
								MedicineQueryListGrid.getSelectionModel()
										.selectAll();
							}
						}
					});