单击 Extjs Grid RowExpander 时出现滚动问题
Scroll Issue when click on Extjs Grid RowExpander
我在使用 extjs 网格行扩展器时遇到问题。
重现步骤：
1.展开第一行。
2. 现在滚动到网格的最后一条记录。
3. 现在展开最后一行。你会看到滚动条自动移动到顶部。
感谢帮助
Ext.create('Ext.grid.Panel', {
margin: '30 2 0 0',
layout: 'fit',
scrollable: 'vertical',
cls: 'logTimeInTask',
bodyCls: 'scrollBar',
renderTo:Ext.getBody(),
maxHeight: 400,
title: 'timeEntryDetail',
scrollable: true,
collapsible: false,
columnLines: false,
expandOnDblClick: false,
viewConfig: {
preserveScrollOnRefresh: true,
preserveScrollOnReload: true
},
columns: [{
text: 'timeLoggedBy',
menuDisabled: true,
sortable: false,
flex: 1,
renderer: function (value, p, record) {
var retDataStr = '';
retDataStr += Ext.String.format('<span>{0}</span>', record.data.creator);
return retDataStr
}
}, {
text: 'time',
sortable: false,
menuDisabled: true,
width: 120,
renderer: function (value, p, record) {
var retDataStr = '';
if (record.data.logged_hours != null) {
retDataStr += record.data.logged_hours + 'h ';
}
if (record.data.logged_mins != null) {
retDataStr += record.data.logged_mins + 'm ';
}
return retDataStr;
}
}, {
text:'date',
sortable: false,
menuDisabled: true,
width: 100,
renderer: function (value, p, record) {
return record.data.date;
}
}, {
text: 'status',
sortable: false,
menuDisabled: true,
dataIndex: 'status',
width: 120,
renderer: function (value, p, record) {
return Ext.String.capitalize(record.data.status);
}
}],
plugins: [{
ptype: 'rowexpander',
rowBodyTpl: new Ext.XTemplate(
'<p><b>timesheet:</b> {timesheet}</p>',
'<tpl if="description!=null">',
'<p><b>description:</b> {[this.showDescription(values)]}</p>',
'</tpl>', {
showDescription: function (values) {
return values.description;
}
}
)
}],
listeners: {
render: function (grid) {
var timeEntryDetailStore = new Ext.data.JsonStore({
data: [{"id":80930195009,"status":"none","description":"dfsgdfsgsd\nfg\ndsf\ng\ndsf\ng\nsdfg\nsdfg","date":"2017-07-17","created_at":"2017-07-17T09:38:32+00:00","logged_hours":3,"logged_mins":54,"timer":false,"timesheet":"111111111111","task_id":14763865922,"sort":0,"project":909679456,"project_name":"wwwwwwwwwwwwwww","creator":1270919337},{"id":80930208578,"status":"none","description":"dsfv dfd sfg\ndsf \ng\ndfsg \ndfsg\n\ndsg\nds\ng\ndfs\ngdsfg\n dfg","date":"2017-07-17","created_at":"2017-07-17T09:39:04+00:00","logged_hours":12,"logged_mins":4,"timer":false,"timesheet":"111111111111","task_id":14763865922,"sort":0,"project":909679456,"project_name":"wwwwwwwwwwwwwww","creator":1270919337},{"id":80930222146,"status":"none","description":"So the problem here is whenever we open a popup window ExtJS library is needed and it is taking up a lot of memory in IE.\n\nIs there any other way we can load a browser window popup with ExtJS grid without loading the whole ExtJS framework?\n\nOr any other idea are most welcome, as we are really facing a lot of memory issues in IE and users are not willing to use chrome.","date":"2017-07-17","created_at":"2017-07-17T09:39:38+00:00","logged_hours":4,"logged_mins":3,"timer":false,"timesheet":"111111111111","task_id":14763865922,"sort":0,"project":909679456,"project_name":"wwwwwwwwwwwwwww","creator":1270919337},{"id":80930235715,"status":"none","description":"So the problem here is whenever we open a popup window ExtJS library is needed and it is taking up a lot of memory in IE.\n\nIs there any other way we can load a browser window popup with ExtJS grid without loading the whole ExtJS framework?\n\nOr any other idea are most welcome, as we are really facing a lot of memory issues in IE and users are not willing to use chrome.","date":"2017-07-17","created_at":"2017-07-17T09:39:44+00:00","logged_hours":3,"logged_mins":54,"timer":false,"timesheet":"111111111111","task_id":14763865922,"sort":0,"project":909679456,"project_name":"wwwwwwwwwwwwwww","creator":1270919337},{"id":80930249284,"status":"none","description":"So the problem here is whenever we open a popup window ExtJS library is needed and it is taking up a lot of memory in IE.\n\nIs there any other way we can load a browser window popup with ExtJS grid without loading the whole ExtJS framework?\n\nOr any other idea are most welcome, as we are really facing a lot of memory issues in IE and users are not willing to use chrome.","date":"2017-07-17","created_at":"2017-07-17T09:39:50+00:00","logged_hours":39,"logged_mins":2,"timer":false,"timesheet":"111111111111","task_id":14763865922,"sort":0,"project":909679456,"project_name":"wwwwwwwwwwwwwww","creator":1270919337},{"id":80930262852,"status":"none","description":"So the problem here is whenever we open a popup window ExtJS library is needed and it is taking up a lot of memory in IE.\n\nIs there any other way we can load a browser window popup with ExtJS grid without loading the whole ExtJS framework?\n\nOr any other idea are most welcome, as we are really facing a lot of memory issues in IE and users are not willing to use chrome.","date":"2017-07-17","created_at":"2017-07-17T09:39:57+00:00","logged_hours":3,"logged_mins":54,"timer":false,"timesheet":"111111111111","task_id":14763865922,"sort":0,"project":909679456,"project_name":"wwwwwwwwwwwwwww","creator":1270919337}]
});
grid.setStore(timeEntryDetailStore);
}
}
})
我已将您的示例粘贴到 Sencha fiddle 中，虽然这发生在 6.0.0 到 6.0.2 中，但它似乎在 6.2.0 到 6.5.0 中已修复。
因此，我将 working source code 与非工作源代码进行了比较，发现了变化。这是适合您的工作覆盖：
Ext.define('Override.RowExpander',{
override:'Ext.grid.plugin.RowExpander',
toggleRow: function(rowIdx) {
this.callParent(arguments);
this.grid.ensureVisible(rowIdx);
}
});
我在使用 extjs 网格行扩展器时遇到问题。
重现步骤：
1.展开第一行。
2. 现在滚动到网格的最后一条记录。
3. 现在展开最后一行。你会看到滚动条自动移动到顶部。
感谢帮助
Ext.create('Ext.grid.Panel', {
margin: '30 2 0 0',
layout: 'fit',
scrollable: 'vertical',
cls: 'logTimeInTask',
bodyCls: 'scrollBar',
renderTo:Ext.getBody(),
maxHeight: 400,
title: 'timeEntryDetail',
scrollable: true,
collapsible: false,
columnLines: false,
expandOnDblClick: false,
viewConfig: {
preserveScrollOnRefresh: true,
preserveScrollOnReload: true
},
columns: [{
text: 'timeLoggedBy',
menuDisabled: true,
sortable: false,
flex: 1,
renderer: function (value, p, record) {
var retDataStr = '';
retDataStr += Ext.String.format('<span>{0}</span>', record.data.creator);
return retDataStr
}
}, {
text: 'time',
sortable: false,
menuDisabled: true,
width: 120,
renderer: function (value, p, record) {
var retDataStr = '';
if (record.data.logged_hours != null) {
retDataStr += record.data.logged_hours + 'h ';
}
if (record.data.logged_mins != null) {
retDataStr += record.data.logged_mins + 'm ';
}
return retDataStr;
}
}, {
text:'date',
sortable: false,
menuDisabled: true,
width: 100,
renderer: function (value, p, record) {
return record.data.date;
}
}, {
text: 'status',
sortable: false,
menuDisabled: true,
dataIndex: 'status',
width: 120,
renderer: function (value, p, record) {
return Ext.String.capitalize(record.data.status);
}
}],
plugins: [{
ptype: 'rowexpander',
rowBodyTpl: new Ext.XTemplate(
'<p><b>timesheet:</b> {timesheet}</p>',
'<tpl if="description!=null">',
'<p><b>description:</b> {[this.showDescription(values)]}</p>',
'</tpl>', {
showDescription: function (values) {
return values.description;
}
}
)
}],
listeners: {
render: function (grid) {
var timeEntryDetailStore = new Ext.data.JsonStore({
data: [{"id":80930195009,"status":"none","description":"dfsgdfsgsd\nfg\ndsf\ng\ndsf\ng\nsdfg\nsdfg","date":"2017-07-17","created_at":"2017-07-17T09:38:32+00:00","logged_hours":3,"logged_mins":54,"timer":false,"timesheet":"111111111111","task_id":14763865922,"sort":0,"project":909679456,"project_name":"wwwwwwwwwwwwwww","creator":1270919337},{"id":80930208578,"status":"none","description":"dsfv dfd sfg\ndsf \ng\ndfsg \ndfsg\n\ndsg\nds\ng\ndfs\ngdsfg\n dfg","date":"2017-07-17","created_at":"2017-07-17T09:39:04+00:00","logged_hours":12,"logged_mins":4,"timer":false,"timesheet":"111111111111","task_id":14763865922,"sort":0,"project":909679456,"project_name":"wwwwwwwwwwwwwww","creator":1270919337},{"id":80930222146,"status":"none","description":"So the problem here is whenever we open a popup window ExtJS library is needed and it is taking up a lot of memory in IE.\n\nIs there any other way we can load a browser window popup with ExtJS grid without loading the whole ExtJS framework?\n\nOr any other idea are most welcome, as we are really facing a lot of memory issues in IE and users are not willing to use chrome.","date":"2017-07-17","created_at":"2017-07-17T09:39:38+00:00","logged_hours":4,"logged_mins":3,"timer":false,"timesheet":"111111111111","task_id":14763865922,"sort":0,"project":909679456,"project_name":"wwwwwwwwwwwwwww","creator":1270919337},{"id":80930235715,"status":"none","description":"So the problem here is whenever we open a popup window ExtJS library is needed and it is taking up a lot of memory in IE.\n\nIs there any other way we can load a browser window popup with ExtJS grid without loading the whole ExtJS framework?\n\nOr any other idea are most welcome, as we are really facing a lot of memory issues in IE and users are not willing to use chrome.","date":"2017-07-17","created_at":"2017-07-17T09:39:44+00:00","logged_hours":3,"logged_mins":54,"timer":false,"timesheet":"111111111111","task_id":14763865922,"sort":0,"project":909679456,"project_name":"wwwwwwwwwwwwwww","creator":1270919337},{"id":80930249284,"status":"none","description":"So the problem here is whenever we open a popup window ExtJS library is needed and it is taking up a lot of memory in IE.\n\nIs there any other way we can load a browser window popup with ExtJS grid without loading the whole ExtJS framework?\n\nOr any other idea are most welcome, as we are really facing a lot of memory issues in IE and users are not willing to use chrome.","date":"2017-07-17","created_at":"2017-07-17T09:39:50+00:00","logged_hours":39,"logged_mins":2,"timer":false,"timesheet":"111111111111","task_id":14763865922,"sort":0,"project":909679456,"project_name":"wwwwwwwwwwwwwww","creator":1270919337},{"id":80930262852,"status":"none","description":"So the problem here is whenever we open a popup window ExtJS library is needed and it is taking up a lot of memory in IE.\n\nIs there any other way we can load a browser window popup with ExtJS grid without loading the whole ExtJS framework?\n\nOr any other idea are most welcome, as we are really facing a lot of memory issues in IE and users are not willing to use chrome.","date":"2017-07-17","created_at":"2017-07-17T09:39:57+00:00","logged_hours":3,"logged_mins":54,"timer":false,"timesheet":"111111111111","task_id":14763865922,"sort":0,"project":909679456,"project_name":"wwwwwwwwwwwwwww","creator":1270919337}]
});
grid.setStore(timeEntryDetailStore);
}
}
})
我已将您的示例粘贴到 Sencha fiddle 中，虽然这发生在 6.0.0 到 6.0.2 中，但它似乎在 6.2.0 到 6.5.0 中已修复。
因此，我将 working source code 与非工作源代码进行了比较，发现了变化。这是适合您的工作覆盖：
Ext.define('Override.RowExpander',{
override:'Ext.grid.plugin.RowExpander',
toggleRow: function(rowIdx) {
this.callParent(arguments);
this.grid.ensureVisible(rowIdx);
}
});