ext的grid中如果对一条记录进行更新操作,grid选中项不会改变解决方案

在使用ext grid的过程中,修改了一条记录,grid数据重新加载了,但是选中项的值并没有改变,如何处理呢,有两种方案

第一种:

更新数据后对grid的SelectionModel进行清空处理

代码: grid.getSelectionModel().deselectAll();

第二种:

经过分析我觉得可能是grid中的SelectionModel中的记录并没有改变,所以才会到这这样的情况,正常流程应该是store重新加载后,需要更新SelectionModel中选中的记录。

于是查看Ext.selection.Model的源码,找到为store绑定事件的方法getStoreListeners,方法内容如下。

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方法上。于是找到这个方法

 /**
     * @abstract
     * @private
     */
    onStoreLoad: Ext.emptyFn,
发现Ext对这个方法的声明是abstract,这个方法是一个空的方法。由此发现Ext的SelectionModel并没有对store重新加载后进行任何的处理。所以我们就自己处理,重写 Ext.selection.Model 的onStoreLoad方法,在这个方法中更新选中的记录,代码如下

[javascript]  view plain  copy
  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. });  


加上上面的代码后问题解决。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Ext 4 ,可以通过使用 `bind` 方法将 Grid 和 Form 绑定在一起,并且在表单进行更改时自动更新绑定的 Store 的行。 首先,在 Grid 创建一个 Store: ```javascript var store = Ext.create('Ext.data.Store', { fields: ['id', 'name', 'email'], data: [ {id: 1, name: 'John', email: 'john@example.com'}, {id: 2, name: 'Jane', email: 'jane@example.com'} ] }); ``` 接下来,创建一个 Grid: ```javascript var grid = Ext.create('Ext.grid.Panel', { store: store, columns: [ {text: 'ID', dataIndex: 'id'}, {text: 'Name', dataIndex: 'name'}, {text: 'Email', dataIndex: 'email'} ], height: 200, width: 400, renderTo: Ext.getBody() }); ``` 然后,创建一个 Form: ```javascript var form = Ext.create('Ext.form.Panel', { bodyPadding: 5, width: 350, height: 250, renderTo: Ext.getBody(), items: [{ xtype: 'textfield', fieldLabel: 'Name', name: 'name' }, { xtype: 'textfield', fieldLabel: 'Email', name: 'email' }] }); ``` 最后,在 Grid 和 Form 使用 `bind` 方法将它们绑定在一起: ```javascript grid.getSelectionModel().on('selectionchange', function(selModel, selections) { form.getForm().bindRecord(selections[0]); }); ``` 现在,当用户在 Grid 选择一行时,表单将自动更新为该行的值,并且在表单进行更改时,该行将自动更新到绑定的 Store 。 ```javascript form.getForm().on('update', function(form, record) { record.commit(); }); ``` 注意,当在表单进行更改时,必须在表单的 `update` 事件手动调用 `commit()` 方法才能将更改保存到 Store

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱人间

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值