extjs - 在单个 GridPanel 中使用 PagingToolbar 和 CheckboxSelectionModel

Question

我已经在 Sencha 论坛上发布了这个，也想在这里发布以防万一:

我有一个使用 PagingToolbar 和 CheckboxSelectionModel 的 GridPanel。我想跟踪跨页面的选择。我快到了，但我遇到了 PagingToolbar 控件(例如下一页)在我的选择模型上触发“selectionchange”事件的问题。

这是我的代码的简化示例:

代码:

var sm = Ext.create('Ext.selection.CheckboxModel', {
    listeners:{
        selectionchange: function(selectionModel, selectedRecords, options){
            console.log("Selection Change!!");
            // CODE HERE TO KEEP TRACK OF SELECTIONS/DESELECTIONS
        }
    }
});

var grid = Ext.create('Ext.grid.Panel', {
    autoScroll:true,
    store: store,
    defaults: {
        sortable:true
    },
    selModel: sm,
    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: store,
        dock: 'bottom',
        displayInfo: true
    }],
    listeners: {'beforerender' : {fn:function(){
        store.load({params:params});

    }}}
});
store.on('load', function() {
    console.log('loading');
    console.log(params);
    console.log('selecting...');
    var records = this.getNewRecords();
    var recordsToSelect = getRecordsToSelect(records);
    sm.select(recordsToSelect, true, true);
});

我假设我可以选择加载事件的记录而不触发任何事件。

这里发生的是在更改数据页面时触发了 selectionchange 事件，我不希望这种情况发生。理想情况下，只有用户点击会被跟踪为“selectionchange”事件，而不是任何其他组件的事件冒泡并触发我的选择模型上的事件。查看源代码，我可以看到在 PagingToolbar 上触发的唯一事件是“更改”。我试图了解 GridPanel、TablePanel、Gridview 等是如何处理的，但我只是没有看到事件的路径。即使这样，我也不确定如何将事件从 PagingToolbar 抑制到 SelectionModel。

提前致谢，
汤姆

Answer 1

我已经设法处理了。关键是检测页面变化的地方。最简单的解决方案是为选择监听器设置缓冲区并检查 Store.loading属性(property)。
这是我的选择模型的实现:

var selModel = Ext.create('Ext.selection.CheckboxModel', {
    multipageSelection: {},
    listeners:{
        selectionchange: function(selectionModel, selectedRecords, options){
            // do not change selection on page change
            if (selectedRecords.length == 0 && this.store.loading == true && this.store.currentPage != this.page) {
                return;
            }

            // remove selection on refresh
            if (this.store.loading == true) {
                this.multipageSelection = {};
                return;
            }

            // remove old selection from this page
            this.store.data.each(function(i) {
                delete this.multipageSelection[i.id];
            }, this);

            // select records
            Ext.each(selectedRecords, function(i) {
                this.multipageSelection[i.id] = true;
            }, this);
        },
        buffer: 5
    },
    restoreSelection: function() {
        this.store.data.each(function(i) {
            if (this.multipageSelection[i.id] == true) {
                this.select(i, true, true);
            }
        }, this);
        this.page = this.store.currentPage;
    }

并且需要额外绑定(bind)到 store:

store.on('load', grid.getSelectionModel().restoreSelection, grid.getSelectionModel());

工作样本: http://jsfiddle.net/pqVmb/