在单个GridPanel中使用PagingToolbar和CheckboxSelectionModel

Question

我已经在Sencha论坛上发布了这篇文章，我也想在这里发布它，以防万一：

我有一个利用PagingToolbar和CheckboxSelectionModel的GridPanel。我想要跟踪跨页面的选择。我马上就到了，但是我遇到了在my selection模型上触发'selectionchange‘事件的PagingToolbar控件(比如next page)的问题。

以下是我的代码的简化示例：

代码：

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);
});

我假设我可以选择load事件上的记录，而不触发任何事件。

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

先谢谢你，汤姆

Answer 1

我已经设法处理好了。关键是检测页面在哪里发生了变化。最简单的解决方案是为选择监听器设置缓冲区，并检查Store.loading属性。下面是我的选择模型的实现：

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;
    }

并且需要对store进行额外的绑定：

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

工作示例：http://jsfiddle.net/pqVmb/

Answer 2

Lolo的解决方案很棒，但它似乎不再适用于ExtJS 4.2.1。

不使用'selectionchange‘，而使用这个：

deselect: function( selectionModel, record, index, eOpts ) {
    delete this.multipageSelection[i.id];
},

select: function( selectionModel, record, index, eOpts ) {
     this.multipageSelection[i.id] = true;
},

Answer 3

这是一个用于ExtJs5的解决方案，利用MVVC在视图模型中创建一个名为'selectedObjects‘的本地存储，并使用与分页网格相同的模型。

在checkboxmodel上添加、选择和取消选择侦听器。在这些函数中，从本地存储中添加或删除选定或取消选定的记录。

onCheckboxModelSelect: function(rowmodel, record, index, eOpts) {
    // Add selected record to the view model store
    this.getViewModel().getStore('selectedObjects').add(record);
},

onCheckboxModelDeselect: function(rowmodel, record, index, eOpts) {
    // Remove selected record from the view model store
    this.getViewModel().getStore('selectedObjects').remove(record);
},

在页面工具栏上，添加一个更改侦听器，以便在页面中出现以前选择的记录时重新选择该记录。

onPagingtoolbarChange: function(pagingtoolbar, pageData, eOpts) {
    // Select any records on the page that have been previously selected
    var checkboxSelectionModel = this.lookupReference('grid').getSelectionModel(),
        selectedObjects = this.getViewModel().getStore('selectedObjects').getRange();

    // true, true params. keepselections if any and suppresses select event. Don't want infinite loop listeners.
    checkboxSelectionModel.select(selectedObjects, true, true);
},

在不再需要这些选择的任何操作完成之后。在checkboxmodel模型上调用deselectAll，如果不是销毁视图，则从本地存储区调用removeAll。(窗口正在关闭，它们默认设置为调用destroy，并将负责本地存储数据清理，如果是您的情况)