记住刷新后在extjs网格中选择的行

remember after refresh selected row in extjs grid

我有问题。我使用extjs grid。该网格将每隔seconds刷新一次。

我使用此功能刷新：

1
2
3
4
5
6
7

ND.refresh = function() {
ND.commList.load();
}

var refreshSeconds = refreshRate * 1000;
var t = setInterval('ND.refresh()', refreshSeconds);

但是当某人选择某行以突出显示该行时reset此选择。
如何记住所选行并在刷新后再次突出显示它？

这是我的网格：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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

谢谢大家

相关讨论

我编写了一个简单的Ext.grid.Panel扩展名，该扩展名自动选择了在重新加载商店之前选择的返回行。您可以在此jsFiddle

中尝试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

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

相关讨论

嘿，看起来不错。我只有两个问题。在Firefox中，我得到这个错误：this.selectedRecords [i] .getId不是一个函数。当我在chrome中使用它时，它将始终在刷新后选择第一行。任何想法可能是什么？谢谢您的帮助：)
在Firefox中的错误是固定的。但它仍将转到第一行
jsfiddle.net/ZemWB是我将网格与您的代码一起放置的地方。您能看到它有什么问题吗？
首先，在您创建的ND jsFiddle中未定义。我猜您从项目中复制/粘贴了代码，但是它无法运行。如果您未在模型中设置idProperty，我想您可能会遇到问题(请看我的测试小提琴)
你是我的英雄！我的模型中没有idProperty。谢谢谢谢谢谢
没问题，很高兴我可以提供帮助:)
我没有其他问题：)我在屏幕上方有一个列表，如果我向下滚动，请选择一行，该行将保持选中状态，但刷新后将向上滚动。我可以为此做些什么吗？
好吧，您可以尝试使用Ext.view.Table.saveScrollState方法和Ext.grid.Panel.setScrollTop方法。您可以使用Ext.grid.Panel.getView方法获取网格面板的视图对象。当然，可以在自定义扩展的rememberSelection和refreshSelection方法中使用适当的方法。
我在答案中更新了代码，因此现在面板将垂直滚动设置为其先前的值。您可以在小提琴中解决问题。
嘿Sbgoran。有一个我无法解决的问题。当页面加载时，我得到一个错误，this.el是未定义的，并且没有加载商店。当刷新功能启动时，它将加载商店。我试图删除此代码并存储好负载。您知道this.el可能是什么吗？
我真的不知道您的代码有什么问题，但是我在rememberSelection中添加了一个检查，该检查应该没有任何危害，请尝试一下，它可能会有所帮助。
很棒，但是它应该是一个插件，而不是基类！
@JuanMendes您可能是对的，但是我想答案显示了解决问题的主要思想，因此很难使插件变得如此困难。也许我有机会时就去做，这应该是一件有趣的事:)
@comecme前一阵子，所以，如果我记得很好，原因在于Ext网格渲染其视图的方式，我认为他们在库本身内部的网格面板渲染期间使用了defer调用，因此，如果您立即调用setScrollTop，则会得到某种"空变量"或"不存在的DOM元素"错误。可能是Ext的更高版本删除了此功能，并且不再需要此功能。

直接的解决方案是将其保存在所选行的js索引中的某个位置。然后，重新加载后，您可以使用网格的选择模型轻松地按索引选择该行。

获取选择模型：http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel-method-getSelectionModel

1	var selectionModel = grid.getSelectionModel()

获取选定的行：http://docs.sencha.com/ext-js/4-0/#!/api/Ext.selection.Model-method-getSelection

1	var selection = selectionModel.getSelection()

将选择的行设置回：http://docs.sencha.com/ext-js/4-0/#!/api/Ext.selection.Model-method-select

1	selectionModel.select(selection)

相关讨论

这是选择先前选择的记录的另一种方法：

1
2
3
4
5
6
7
8
9
10

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()。

相关讨论

对于extjs 4.1.7用户

需要围绕

中的声明的解决方法

refreshSelection() {

...
Ext.defer(this.setScrollTop, 30, this,
[this.getView().scrollState.top])

} ??

因此setScrollTop不再存在

因此添加了有效的解决方案
me.getView()。preserveScrollOnRefresh = true;

在initComponent

中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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);
}
});

相关讨论

在您的initComponent中，您尝试使用" me"而不定义它。

我对此代码进行了修改。
如果进行选择，并在商店上启用过滤器并重新加载，则选择模型在此所选集合中(索引0处)具有第一个空数组。

此修改位于" refreshSelection "函数的最后一行。

1
2
3
4
if (newRecordsToSelect.length >= 1){
this.getSelectionModel().select(newRecordsToSelect);
Ext.defer(this.setScrollTop, 30, this, [this.getView().scrollState.top]);
}