首先这个问题之前我以为是store重新加载不能彻底刷新的结果呢,但是问题总是要解决的,所以百度了很多,最后也找到了一个最简单的方法,希望对初学的你们会有用,也谢谢被参考的文章作者。
源引:http://blog.sina.com.cn/s/blog_91f9658f0101frdj.html
原因:store重新加载将不会对grid的选中项修改,grid选中项不会改变.
在项目开发中遇到这样一个问题,点击Grid中的一条记录并修改,修改完后保存并且刷新表格,后台已保存成功,并且前台grid中的值也已经改变。这时候被修改的记录还处于选中状态,然后再次点修改,发现表单中的值还是原来的值,但是在选择另外一条记录后,再次选择这条记录并修改时发现值已改变。
如图:这是原记录,现在我们在角色说明后面加几个*号,测试
保存后,原来被修改的记录还处于选择状态,然后我点击修改按钮,发现Form中的值还是修改前的值。
注:表单是通过loadRecord的方式加载的值,在每次赋值前都执行了reset(true)方法,所以不是Form缓存的问题
当我们选择另外一条记录,然后再此选择这条记录是值又变成了修改后的值
经过分析我觉得可能是grid中的SelectionModel中的记录并没有改变,所以才会到这这样的情况,正常流程应该是store重新加载后,需要更新SelectionModel中选中的记录。
于是查看Ext.selection.Model的源码,找到为store绑定事件的方法getStoreListeners,方法内容如下。
<pre name="code" class="html">getStoreListeners: function() { var me = this; return { add: me.onStoreAdd, clear: me.onStoreClear, bulkremove: me.onStoreRemove, update: me.onStoreUpdate, load: me.onStoreLoad, idchanged: me.onModelIdChanged, refresh: me.onStoreRefresh }; },
发现监听了store的load事件,于是猜想问题应该出在onStoreLoad方法上。于是找到这个方法
<pre name="code" class="html">onStoreLoad: Ext.emptyFn,
发现Ext对这个方法的声明是abstract,这个方法是一个空的方法。由此发现Ext的SelectionModel并没有对store重新加载后进行任何的处理。所以我们就自己处理,重写Ext.selection.Model的onStoreLoad方法,在这个方法中更新选中的记录,代码如下
1./**
2. * 处理Grid重新加载过后selectionModel中的记录不更新的问题
3. * me.selected中存放的是选中的记录的集合
4. */
5.Ext.override(Ext.selection.Model,{
6. onStoreLoad:function(store, records, successful, eOpts){
7. var me = this,
8. length = me.selected.getCount( );
9.
10. //如果没有选中的记录,则不需要进行任何的操作
11. if(length===0)return;
12.
13. //遍历selected并更新其中的记录
14. me.selected.eachKey(function(key,item){
15. var model = store.getById(key);
16.
17. //如果获取到了model就更新,否则从selected中移除
18. if(model){
19. me.selected.add(model);//add时会覆盖掉原来的值
20. }else{
21. me.selected.removeAtKey(key);
22. }
23. })
24.
25. }
26.});