我已经在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);
});
我假设我可以选择关于load事件的记录,而不触发任何事件。
这里发生的事情是在更改数据页时触发了selectionchange事件,我不希望发生这种情况。理想情况下,仅将用户单击作为“ selectionchange”事件进行跟踪,而不会将任何其他组件的事件冒泡并触发我的选择模型上的事件。查看源代码,我能看到的唯一事件是“更改”。我试图遵循GridPanel,TablePanel,Gridview等的处理方式,但是我只是没有看到事件的路径。即使那样,我也不确定如何抑制从PagingToolbar到SelectionModel的事件。
提前致谢,
汤姆
最佳答案
我已经设法解决了。关键是检测页面更改的位置。最简单的解决方案是为选择侦听器设置缓冲区并检查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.on('load', grid.getSelectionModel().restoreSelection, grid.getSelectionModel());
工作样本:http://jsfiddle.net/pqVmb/