我有问题。我使用extjs grid
。此网格将每seconds
次刷新一次。
我使用此功能刷新:
ND.refresh = function() {
ND.commList.load();
}
var refreshSeconds = refreshRate * 1000;
var t = setInterval('ND.refresh()', refreshSeconds);
但是当有人选择了一行来突出显示它时reset
这个选择。
如何记住所选行并在刷新后再次突出显示?
这是我的网格:
var grid = Ext.create('Ext.grid.Panel', {
autoscroll: true,
region: 'center',
store: ND.dashBoardDataStore,
stateful: true,
forceFit: true,
loadMask: false,
stateId: 'stateGrid',
viewConfig: {
stripeRows: true
},
columns: [{
text: 'Vehicle',
sortable: true,
flexible: 1,
width: 60,
dataIndex: 'vehicle'
}, {
text: 'CCU',
sortable: true,
flexible: 0,
width: 50,
renderer: status,
dataIndex: 'ccuStatus'
}]
});
谢谢你们
答案 0 :(得分:20)
我编写了简单的Ext.grid.Panel扩展名,可自动选择在商店重新加载之前选择的后退行。您可以在this jsFiddle
中试用Ext.define('PersistantSelectionGridPanel', {
extend: 'Ext.grid.Panel',
selectedRecords: [],
initComponent: function() {
this.callParent(arguments);
this.getStore().on('beforeload', this.rememberSelection, this);
this.getView().on('refresh', this.refreshSelection, this);
},
rememberSelection: function(selModel, selectedRecords) {
if (!this.rendered || Ext.isEmpty(this.el)) {
return;
}
this.selectedRecords = this.getSelectionModel().getSelection();
this.getView().saveScrollState();
},
refreshSelection: function() {
if (0 >= this.selectedRecords.length) {
return;
}
var newRecordsToSelect = [];
for (var i = 0; i < this.selectedRecords.length; i++) {
record = this.getStore().getById(this.selectedRecords[i].getId());
if (!Ext.isEmpty(record)) {
newRecordsToSelect.push(record);
}
}
this.getSelectionModel().select(newRecordsToSelect);
Ext.defer(this.setScrollTop, 30, this, [this.getView().scrollState.top]);
}
});
答案 1 :(得分:6)
简单明了的解决方案就是保存在所选行的js索引中的某个位置。然后在重新加载后,您可以使用网格的选择模型轻松地按索引选择此行。
获取选择模型:http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel-method-getSelectionModel
var selectionModel = grid.getSelectionModel()
获取所选行:http://docs.sencha.com/ext-js/4-0/#!/api/Ext.selection.Model-method-getSelection
var selection = selectionModel.getSelection()
设置选定的行:http://docs.sencha.com/ext-js/4-0/#!/api/Ext.selection.Model-method-select
selectionModel.select(selection)
答案 2 :(得分:3)
以下是另一种选择以前选择的记录的方法:
var selectionModel = grid.getSelectionModel()
// get the selected record
var selectedRecord = selectionModel.getSelection()[0]
// get the index of the selected record
var selectedIdx = grid.store.indexOfId(selectedRecord.data.id);
// select by index
grid.getSelectionModel().select(selectedIdx);
由于某种原因,grid.getSelectionModel()。select(record)方法对我来说不起作用,但是按索引选择似乎有效。
编辑:找出为什么grid.getSelectionModel()。select(record)方法无效。显然,商店被重新加载,记录实例不一样(它们具有不同的自动生成的Ext ID)。在这种情况下你必须使用selectAt()。
答案 3 :(得分:1)
用于extjs 4.1.7用户
需要关于
中声明的工作refreshSelection(){
...
Ext.defer(this.setScrollTop,30,this, [this.getView()。scrollState.top])}
因此setScrollTop不再存在
所以添加一个工作解决方案 me.getView()。preserveScrollOnRefresh = true;
在initComponent
中Ext.define('PersistantSelectionGridPanel', {
extend: 'Ext.grid.Panel',
selectedRecords: [],
initComponent: function() {
this.callParent(arguments);
this.getStore().on('beforeload', this.rememberSelection, this);
this.getView().on('refresh', this.refreshSelection, this);
//-------------------------------------------
me.getView().preserveScrollOnRefresh = true;
//-------------------------------------------
},
rememberSelection: function(selModel, selectedRecords) {
if (!this.rendered || Ext.isEmpty(this.el)) {
return;
}
this.selectedRecords = this.getSelectionModel().getSelection();
this.getView().saveScrollState();
},
refreshSelection: function() {
if (0 >= this.selectedRecords.length) {
return;
}
var newRecordsToSelect = [];
for (var i = 0; i < this.selectedRecords.length; i++) {
record = this.getStore().getById(this.selectedRecords[i].getId());
if (!Ext.isEmpty(record)) {
newRecordsToSelect.push(record);
}
}
this.getSelectionModel().select(newRecordsToSelect);
}
});
答案 4 :(得分:0)
我对此代码进行了修改。 如果您进行选择并在商店中使用过滤器并重新加载它,则选择模型在此选定集合中具有第一个空数组(在索引0处)。
此修改位于“refreshSelection”函数的最后一行。
if (newRecordsToSelect.length >= 1){
this.getSelectionModel().select(newRecordsToSelect);
Ext.defer(this.setScrollTop, 30, this, [this.getView().scrollState.top]);
}