Ext JS 4.2.1 - 带分页的网格 - 复选框状态丢失

时间:2016-07-07 08:48:53

标签: javascript extjs checkbox

我有一个ExtJS网格,其中包含用于(远程)分页的PagingToolbar,以及一个定义为的复选框列:

{
    dataIndex : 'selected',
    xtype: 'checkcolumn',
    width : 60                      
}

但是,如果我选中一个方框然后向前和向后翻页,则不会保存复选框状态 - 所有复选框都未选中。

我猜因为商店只包含当前页面的数据(来自服务器),我需要一些方法来存储不在当前数据页面中的行的状态,然后在我返回时恢复复选框那页。

是否有最佳做法,或在分页时将复选框状态存储在商店中的示例?

1 个答案:

答案 0 :(得分:4)

嗯,这是如此低级别的工作,没有人想过为它做出“最佳实践”。 E.g。

beforeload:function(store) {
    if(!store.checkedItems) store.checkedItems = [];
    store.each(function(item) {
        store.checkedItems[item.get("Id")] = item.get("selected");
    });
},
load:function(store) {
    if(!store.checkedItems) store.checkedItems = [];
    store.each(function(item) {
        item.set("selected",store.checkedItems[item.get("Id")]);
    });
}

beforeload:function(store) {
    if(!store.checkedItems) store.checkedItems = [];
    store.each(function(item) {
        store.checkedItems[item.get("Id")] = {selected: item.get("selected") }; // extensible if you want to keep more than one checkbox...
    });
},
load:function(store) {
    if(!store.checkedItems) store.checkedItems = [];
    store.each(function(item) {
        item.set(store.checkedItems[item.get("Id")]);
    });
}